TheLazy.Dev
Portfolio GitHub

Blog

html |web |tutorial |programming

HTML Tips You Must Know About

pinky057

ishrat

Posted on April 8, 2024

HTML Tips You Must Know About

Semantic HTML: 

   <header>
       <h1>Website Title</h1>
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
   </header>
   <main>
       <article>
           <h2>Article Title</h2>
           <p>Article content...</p>
       </article>
   </main>
   <footer>
       <p>&copy; 2024 Website Name</p>
   </footer>
Enter fullscreen mode Exit fullscreen mode

Using semantic HTML elements helps to structure the page meaningfully, making it more accessible and understandable for both browsers and developers.

Responsive Images: 

   <img src="image.jpg" alt="Description of image" style="max-width:100%; height:auto;">
Enter fullscreen mode Exit fullscreen mode

This ensures that the image scales proportionally and remains within the boundaries of its parent container, adapting to various screen sizes.

Form Elements: 

   <form action="/submit" method="post">
       <label for="name">Name:</label>
       <input type="text" id="name" name="name" required>

       <label for="email">Email:</label>
       <input type="email" id="email" name="email" required>

       <button type="submit">Submit</button>
   </form>
Enter fullscreen mode Exit fullscreen mode

Properly structured forms with appropriate input types and labels improve user experience and accessibility.

Certainly! Here are some more unique and updated HTML examples with codes:

Interactive SVG: 

<svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Enter fullscreen mode Exit fullscreen mode

SVG (Scalable Vector Graphics) allows for the creation of interactive graphics directly within HTML, providing scalability and responsiveness.

Custom Data Attributes: 

<div id="product" data-product-id="12345" data-category="electronics">
    <!-- Product details -->
</div>
Enter fullscreen mode Exit fullscreen mode

Data attributes (data-*) provide a way to store custom data associated with HTML elements, which can be useful for JavaScript interactions and styling.

Details and Summary: 

<details>
    <summary>Click to expand</summary>
    <p>Hidden content here...</p>
</details>
Enter fullscreen mode Exit fullscreen mode

The <details> and <summary> elements provide a way to create collapsible content sections, allowing users to reveal additional information as needed.

Responsive Iframe: 

<div style="position:relative; padding-bottom:56.25%; height:0;">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
Enter fullscreen mode Exit fullscreen mode

This responsive iframe code ensures that embedded content like YouTube videos maintains its aspect ratio and adapts to different screen sizes.

Progress Bar: 

<progress value="70" max="100">70%</progress>
Enter fullscreen mode Exit fullscreen mode

The <progress> element creates a progress bar to indicate the completion status of a task or process.

Picture Element for Responsive Images: 

<picture>
    <source srcset="image-large.jpg" media="(min-width: 1024px)">
    <source srcset="image-medium.jpg" media="(min-width: 768px)">
    <img src="image-small.jpg" alt="Image">
</picture>
Enter fullscreen mode Exit fullscreen mode

The <picture> element allows you to specify multiple image sources based on different media queries, ensuring the appropriate image is loaded based on the viewport size.

Meter Element: 

<meter value="0.6" min="0" max="1">60%</meter>
Enter fullscreen mode Exit fullscreen mode

The <meter> element represents a scalar measurement within a known range, such as disk usage, completion percentage, etc.

HTML5 Features(Video and Audio): 

<video controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>
Enter fullscreen mode Exit fullscreen mode

Forms: 

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">Login</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Data Attributes: 

<div id="product" data-product-id="12345" data-category="electronics">
    <!-- Product details -->
</div>
Enter fullscreen mode Exit fullscreen mode

Responsive Images: 

<picture>
    <source srcset="image-large.jpg" media="(min-width: 1024px)">
    <source srcset="image-medium.jpg" media="(min-width: 768px)">
    <img src="image-small.jpg" alt="Image">
</picture>
Enter fullscreen mode Exit fullscreen mode

Accessibility: 

<button aria-label="Close" onclick="closeModal()">X</button>
Enter fullscreen mode Exit fullscreen mode

The aria-label attribute provides an accessible label for screen readers, enhancing accessibility for users with disabilities. It describes the action performed by the button.

Character Encoding: 

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

This meta tag specifies the character encoding of the HTML document, ensuring proper display of special characters and symbols.

HTML5 Canvas: 

<canvas id="myCanvas" width="200" height="100"></canvas>
Enter fullscreen mode Exit fullscreen mode

The <canvas> element is used to draw graphics, animations, or other visual images on the fly using JavaScript.

SVG Image: 

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Enter fullscreen mode Exit fullscreen mode

SVG (Scalable Vector Graphics) allows for the creation of vector-based images that can be scaled to any size without losing quality.

Responsive Table: 

<table>
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>30</td>
        </tr>
        <!-- More rows... -->
    </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

Tables should be used carefully for tabular data, and in this example, the table structure is designed to adapt to different screen sizes for better responsiveness.

Content Security Policy(CSP): 

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
Enter fullscreen mode Exit fullscreen mode

Content Security Policy (CSP) is a security feature that helps prevent XSS attacks by controlling which resources can be loaded and executed on a webpage. In this example, it restricts resources to those from the same origin.

These examples showcase various HTML concepts and best practices. Remember to modify them to fit your project needs.

💖 💪 🙅 🚩
pinky057
ishrat

Posted on April 8, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

HTML Tips You Must Know About
html HTML Tips You Must Know About

April 8, 2024

HTML beginner's tutorial: Build a webpage from scratch with HTML
html HTML beginner's tutorial: Build a webpage from scratch with HTML

March 23, 2023

Intro to HTML5
html Intro to HTML5

November 26, 2020