HTML Elements - HTML & CSS Tutorial

Structural Elements

These elements provide the overall structure of a web page.

<header>, <nav>, <main>, <footer>

Semantic elements that describe the purpose of the content.

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>

<footer>
    <p>© 2023 My Website</p>
</footer>

<section> and <article>

Used to organize content into logical sections.

<section>
    <h2>Section Title</h2>
    <p>Section content...</p>
</section>

<article>
    <h2>Article Title</h2>
    <p>Article content...</p>
</article>

<aside> and <figure>

For content indirectly related to the main content.

<aside>
    <p>Related information</p>
</aside>

<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Image caption</figcaption>
</figure>

Text Elements

These elements are used to format and structure text content.

Headings and Paragraphs

Structure content hierarchically.

<h1>Main Heading (only one per page)</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<p>This is a paragraph with <strong>bold text</strong> and <em>italicized text</em>.</p>

Lists

Organize related content in list formats.

<!-- Unordered List -->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

<!-- Description List -->
<dl>
    <dt>Term</dt>
    <dd>Definition of the term</dd>
    <dt>Another Term</dt>
    <dd>Definition of another term</dd>
</dl>

Inline Text Elements

Format specific parts of text within larger elements.

<p>
    This text is <strong>important</strong> and has <em>emphasis</em>.
    It also includes <code>inline code</code> and <mark>highlighted text</mark>.
    We can also use <small>small text</small> and <del>deleted text</del>.
    Here's an abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr>.
</p>

Media Elements

Embed images, audio, video, and other media content.

<img> Element

Embed images in your page.

<!-- Basic image -->
<img src="image.jpg" alt="Descriptive text">

<!-- Responsive image -->
<img src="image.jpg" alt="Descriptive text" width="300" height="200">

<audio> and <video> Elements

Embed audio and video content.

<!-- Audio player -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

<!-- Video player -->
<video width="640" height="360" controls poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

<iframe> Element

Embed another HTML document within the current document.

<!-- Embedded map -->
<iframe 
    src="https://www.google.com/maps/embed?..." 
    width="600" 
    height="450" 
    frameborder="0" 
    style="border:0" 
    allowfullscreen>
</iframe>

<!-- Embedded video -->
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

Interactive Elements

Enable user interaction with the page.

<form> and Form Elements

Collect user input.

<form action="/submit" method="post">
    <fieldset>
        <legend>Contact Information</legend>
        
        <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>
        
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="18" max="100">
        
        <label for="bio">Bio:</label>
        <textarea id="bio" name="bio" rows="4"></textarea>
        
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="us">United States</option>
            <option value="ca">Canada</option>
            <option value="uk">United Kingdom</option>
        </select>
        
        <button type="submit">Submit</button>
    </fieldset>
</form>

Buttons and Details

Other interactive elements.

<!-- Regular button -->
<button type="button">Click Me</button>

<!-- Toggle details/summary -->
<details>
    <summary>More Information</summary>
    <p>Detailed information goes here...</p>
</details>

<!-- Dialog box -->
<dialog id="myDialog">
    <p>This is a dialog box</p>
    <form method="dialog">
        <button>Close</button>
    </form>
</dialog>

HTML Elements Guide