Elements, Tags, and Attributes

[chrismory]

3.1 Elements, Tags, and Attributes
Understanding the basic building blocks of HTML is crucial for writing clean, semantic code.
The Three Fundamental Concepts
Elements - The complete component including opening tag, content, and closing tag
Tags - The markers that define the beginning and end of an element
Attributes - Additional information that modifies or configures an element

Elements vs Tags

<!-- This is a PARAGRAPH ELEMENT -->

<p>This is paragraph content.</p>

<!--  Opening tag   Content   Closing tag -->


<!-- The TAGS are the <p> and </p> markers -->

Anatomy of an HTML Element

<element-name attribute="value">Content</element-name>

Breaking it down:

• <element-name> - Opening tag
• attribute="value" - Attribute with its value
• Content - The element's content (text, other elements)
• </element-name> - Closing tag

Common Element Examples

<!-- Heading element -->

<h1>Main Title</h1>

<!-- Paragraph element -->

<p>This is a paragraph of text.</p>

<!-- Anchor (link) element -->

<a href="https://example.com">Visit Example</a>

<!-- Image element -->

<img src="photo.jpg" alt="A beautiful sunset">

Attributes in Depth
Attributes provide additional information about elements:

<!-- Single attribute -->

<input type="text">


<!-- Multiple attributes -->

<a href="https://example.com" target="_blank" class="external-link">

    Visit Example

</a>

<!-- Boolean attributes (true when present) -->

<input type="checkbox" checked disabled>

<!-- "checked" and "disabled" are both true -->

Attribute Syntax Rules
Quotes:

<!-- Double quotes (recommended) -->

<a href="https://example.com">Link</a>

<!-- Single quotes (acceptable) -->

<a href='https://example.com'>Link</a>


<!-- No quotes (only for single values, not recommended) -->

<input type=text>

Case Sensitivity:

<!-- HTML is case-insensitive for element and attribute names -->

<DIV CLASS="container">Content</DIV>

<!-- Same as: -->

<div class="container">Content</div>

Complete Element Breakdown

<a href="contact.html" class="btn primary" id="contact-link">
    Contact Us
</a>

Analysis:

• Element: Anchor (<a>)
• Tags: <a> and </a>
• Attributes:
  • href="contact.html" - Destination URL
  • class="btn primary" - CSS classes
  • id="contact-link" - Unique identifier
• Content: "Contact Us"

---

​

3.2 Nesting Elements
Nesting is the practice of placing elements inside other elements, creating a parent-child relationship that forms the document structure.
Basic Nesting Concept

<!-- Parent element contains child elements -->

<div>

    <h1>Title</h1>

    <p>Paragraph with <strong>bold text</strong> inside.</p>

</div>

Proper Nesting Rules
Correct Nesting (First opened, last closed):

<!-- CORRECT: Properly nested -->

<p>This is <strong>important</strong> text.</p>

<!-- <p> opens first, then <strong>, then </strong>, then </p> -->

<!-- CORRECT: Multiple levels -->

<div>

    <article>

        <h1>Article Title</h1>

        <p>Article content.</p>

    </article>

</div>

Incorrect Nesting (Overlapping elements):

<!-- INCORRECT: Overlapping elements -->

<p>This is <strong>important text.</p></strong>

<!-- ERROR: <strong> is closed after <p> -->

<!-- INCORRECT: Improper closure -->

<div><p>Content</div></p>

<!-- ERROR: <div> closed before <p> -->

Common Nesting Patterns
Text Formatting Nesting

<p>

    This paragraph contains

    <em>emphasized text</em> and

    <strong>strong importance</strong> with

    <a href="#">a link</a> inside.

</p>

List Nesting

<ul>

    <li>First item</li>

    <li>Second item with <span>special text</span></li>

    <li>

        Third item with nested list:

        <ul>

            <li>Nested item A</li>

            <li>Nested item B</li>

        </ul>

    </li>

</ul>

Form Nesting

<form>

    <fieldset>

        <legend>Personal Information</legend>

        <div>

            <label for="name">Name:</label>

            <input type="text" id="name">

        </div>

        <div>

            <label for="email">Email:</label>

            <input type="email" id="email">

        </div>

    </fieldset>

</form>

The Document Tree
Nesting creates a hierarchical structure called the DOM Tree (Document Object Model):

└── head

│   ├── title

│   └── meta

└── body

    ├── header

    │   ├── nav

    │   └── div

    ├── main

    │   ├── article

    │   │   ├── h1

    │   │   └── p

    │   └── aside

    └── footer

Nesting Limitations
Some elements have specific nesting rules:
Block-level elements can contain:

• Other block-level elements
• Inline elements
• Text content

Inline elements can contain:

• Other inline elements
• Text content
• Cannot contain block-level elements

<!-- VALID: Block containing inline -->

<p>This is <span>valid</span> nesting.</p>

<!-- INVALID: Inline containing block -->

<span>This is <p>invalid</p> nesting.</span>

---

​

3.3 Empty (Void) Elements
Empty elements, also called void elements, are elements that cannot have content and therefore don't require a closing tag.
Common Void Elements

<!-- Line break -->

<br>

<!-- Horizontal rule -->

<hr>
<!-- Image -->

<img src="photo.jpg" alt="Description">

<!-- Input field -->

<input type="text" name="username">

<!-- Meta tag (in head) -->

<meta charset="UTF-8">

<!-- Link (in head) -->

<link rel="stylesheet" href="styles.css">

<!-- Area in image maps -->

<area shape="rect" coords="0,0,100,100" href="page.html">

Void Element Syntax
Traditional HTML:

<br>
<hr>
<img src="image.jpg" alt="Description">

XHTML Style (also valid in HTML5):

<br />

<hr />

<img src="image.jpg" alt="Description" />

HTML5 Standard (recommended):

<br>

<hr>

<img src="image.jpg" alt="Description">

Why Void Elements Exist
Void elements represent self-contained content or structural breaks that don't logically contain other content:

<!-- Structural breaks -->

<p>First line<br>Second line</p>

 

<hr>

 

<p>Section divider above</p>

 

<!-- External resources -->

<img src="logo.png" alt="Company Logo">

 

<!-- Form controls -->

<input type="email" placeholder="Enter your email">

 

<!-- Metadata -->

<meta name="description" content="Page description">

Common Mistakes with Void Elements

<!-- INCORRECT: Attempting to add content -->

<br>This won't work</br>

<img src="photo.jpg">Caption</img>


<!-- INCORRECT: Using closing tags -->

<br></br>

<hr></hr>

<!-- CORRECT: No content, no closing tag -->

<br>

<img src="photo.jpg" alt="Description">

Complete Void Element Examples

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Void Elements Example</title>

</head>

<body>

    <h1>My Profile</h1>

  

    <img src="avatar.jpg" alt="User avatar" class="profile-pic">

  

    <p>Name: John Doe<br>

       Email: john@example.com<br>

       Phone: 555-0123</p>

  

    <hr>

  

    <form>

        <label for="message">Message:</label><br>

        <textarea id="message" name="message"></textarea><br>

        <input type="submit" value="Send">

    </form>

</body>

</html>

---

​

3.4 Block-level vs. Inline Elements (The Classic Model)
Understanding the difference between block-level and inline elements is fundamental to HTML layout and CSS styling.
Block-level Elements
Block-level elements always start on a new line and take up the full width available.
Characteristics:

• Start on a new line
• Take full available width (100%)
• Can contain other block-level and inline elements
• Have top and bottom margins by default

Common Block-level Elements:

<!-- Text content blocks -->

<h1> to <h6>  <!-- Headings -->

<p>            <!-- Paragraphs -->

<blockquote>   <!-- Block quotations -->

 

<!-- Structural blocks -->

<div>          <!-- Generic container -->

<header>       <!-- Header section -->

<footer>       <!-- Footer section -->

<main>         <!-- Main content -->

<section>      <!-- Document section -->

<article>      <!-- Self-contained content -->

<aside>        <!-- Side content -->

 

<!-- Lists -->

<ul>, <ol>, <li>  <!-- Lists and list items -->

 

<!-- Forms -->

<form>         <!-- Form container -->

 

<!-- Tables -->

<table>        <!-- Table -->

Block-level Element Behavior:

<!-- Each block starts on a new line -->

<h1>Heading</h1>

<p>This paragraph takes the full width.</p>

<div>This div also takes full width.</div>

Visual Result:

┌─────────────────────────────┐

│           Heading           │

├─────────────────────────────┤

│ This paragraph takes the    │

│ full width.                 │

├─────────────────────────────┤

│ This div also takes full    │

│ width.                      │

└─────────────────────────────┘

Inline Elements
Inline elements do not start on a new line and only take up as much width as necessary.
Characteristics:

• Flow within text/content
• Take only necessary width
• Cannot contain block-level elements
• No line breaks before or after

Common Inline Elements:

<!-- Text formatting -->

<span>         <!-- Generic inline container -->

<strong>       <!-- Strong importance -->

<em>           <!-- Emphasis -->

<a>            <!-- Anchor (link) -->

<br>           <!-- Line break -->

<img>          <!-- Image -->
 

<!-- Code and quotes -->

<code>         <!-- Code snippet -->

<q>            <!-- Inline quotation -->


<!-- Subscripts and superscripts -->

<sub>          <!-- Subscript -->

<sup>          <!-- Superscript -->

Inline Element Behavior:

<p>

    This paragraph contains

    <strong>strong text</strong>,

    <em>emphasized text</em>, and

    <a href="#">a link</a>.

</p>

Visual Result:

This paragraph contains strong text, emphasized
text, and a link.
Practical Examples
Mixed Block and Inline

<article>

    <h1>Article Title</h1>

    <p>

        This is a paragraph with

        <strong>important text</strong> and

        <a href="read-more.html">a link</a>.

    </p>

    <div class="author-info">

        Written by <span class="author">John Doe</span>

    </div>

</article>

Common Mistakes

<!-- INVALID: Inline containing block -->

<a href="#">

    <div>This is invalid!</div>

</a>

 

<!-- INVALID: Block-level in inline context -->

<span>

    <p>This paragraph shouldn't be here!</p>

</span>

 

<!-- CORRECT: Proper nesting -->

<div>

    <a href="#">

        <span>This is valid nesting</span>

    </a>

</div>

The Modern CSS Display Property
While the block/inline model is fundamental, modern CSS has expanded this with the display property:

/* Traditional display values */

display: block;      /* Block-level */

display: inline;     /* Inline */

display: inline-block; /* Inline but with block properties */

display: none;       /* Hidden */

 

/* Modern layout values */

display: flex;       /* Flexible box layout */

display: grid;       /* Grid layout */

display: inline-flex; /* Inline flex container */

---

​

3.5 Global Attributes: id, class, style, title, lang, data-*
Global attributes are attributes that can be used on any HTML element, providing consistent functionality across different element types.
Core Global Attributes
id - Unique Identifier

<section id="main-content">

<div id="user-profile-123">

<form id="contact-form">

• Must be unique within the document
• Used for:
  • CSS styling (#main-content)
  • JavaScript selection (document.getElementById())
  • Anchor links (<a href="#main-content">)

class - CSS Class Selector

<button class="btn btn-primary">

<article class="post featured">

<div class="container fluid">

• Can be used on multiple elements
• Multiple classes separated by spaces
• Used for CSS styling and JavaScript selection

style - Inline CSS

<p style="color: red; font-size: 16px;">

<div style="background: blue; padding: 10px;">

• Applies CSS directly to the element
• Use sparingly - prefer external CSS files
• Useful for dynamic styles via JavaScript

title - Tooltip Text

<abbr title="HyperText Markup Language">HTML</abbr>

<a href="#" title="Learn more about this topic">Read more</a>

<img src="chart.jpg" alt="Sales chart" title="Q4 2024 Sales Results">

• Displays as a tooltip when hovering
• Provides additional context
• Important for accessibility

lang - Language Specification

<html lang="en">

<p lang="fr">Bonjour le monde</p>

<blockquote lang="es">¡Hola!</blockquote>

• Specifies the language of element's content
• Inherits from parent elements
• Important for screen readers and translation

The data-* Attributes
Custom data attributes allow you to store extra information in HTML elements.
Basic Syntax

<div data-user-id="12345" data-role="admin">

<button data-action="delete" data-item-id="42">

<article data-category="technology" data-published="2024-01-15">

Common Use Cases
JavaScript Integration:

<button data-action="save" data-document-id="doc-123">

    Save Document

</button>

 

<script>

document.querySelector('button').addEventListener('click', function() {

    const action = this.dataset.action; // "save"

    const docId = this.dataset.documentId; // "doc-123"

    // Perform action with data

});

</script>

CSS Styling:

<div data-status="pending">Task 1</div>

<div data-status="completed">Task 2</div>

<div data-status="in-progress">Task 3</div>

 

<style>

[data-status="pending"] { color: orange; }

[data-status="completed"] { color: green; }

[data-status="in-progress"] { color: blue; }

</style>

Additional Important Global Attributes
contenteditable - Makes content editable

<div contenteditable="true">

    You can edit this text directly in the browser!

</div>

hidden - Hides elements

<p hidden>This content is not visible.</p>

<div id="error-message" hidden>Error occurred!</div>

tabindex - Controls keyboard navigation

<button tabindex="1">First in tab order</button>

<div tabindex="2">Focusable div</div>

<button tabindex="-1">Not in tab order</button>

accesskey - Keyboard shortcuts

<button accesskey="s">Save (Alt+S)</button>

<a href="#" accesskey="h">Home (Alt+H)</a>

Complete Global Attributes Example

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        .highlight { background-color: yellow; }

        .featured { border: 2px solid blue; }

        [data-category="news"] { color: red; }

    </style>

</head>

<body>

    <!-- Using multiple global attributes -->

    <article

        id="post-123"

        class="post featured highlight"

        data-category="news"

        data-published="2024-01-20"

        title="Latest news article"

        lang="en-US"

    >

        <h1>Breaking News</h1>

      

        <p

            class="content"

            style="font-size: 18px; line-height: 1.6;"

            contenteditable="false"

        >

            This is an important news article with

            <span class="keyword" data-importance="high">critical information</span>.

        </p>

      

        <div class="meta" hidden>

            <span data-author-id="user-456">Written by John Doe</span>

        </div>

      

        <button

            class="btn"

            data-action="share"

            data-post-id="123"

            accesskey="s"

            tabindex="1"

        >

            Share Article (Alt+S)

        </button>

    </article>

</body>

</html>

Global Attributes Reference Table

Attribute	Purpose	Example
id	Unique identifier	id="main-header"
class	CSS class selector	class="btn primary"
style	Inline CSS	style="color: red;"
title	Tooltip text	title="More information"
lang	Language	lang="fr"
data-*	Custom data	data-user-role="admin"
hidden	Hide element	hidden
contenteditable	Make editable	contenteditable="true"
tabindex	Tab order	tabindex="1"
accesskey	Keyboard shortcut	accesskey="s"

---

​

Chapter 3 Summary
In this chapter, you've learned:

• Elements, Tags, and Attributes - The fundamental building blocks
• Nesting Elements - Creating parent-child relationships with proper structure
• Empty (Void) Elements - Self-closing elements like <img> and <br>
• Block-level vs. Inline Elements - Understanding layout behavior
• Global Attributes - Attributes that work on any element (id, class, style, etc.)

Practice Exercise:
Create an HTML document that demonstrates:

• Properly nested elements with mixed block and inline content
• Use of void elements like <img> and <br>
• Application of global attributes (id, class, data-*)
• Both block-level and inline elements working together

In the next chapter, we'll dive into text fundamentals, exploring headings, paragraphs, and text-level semantics for creating rich, meaningful content.

---

​

Key Terms to Remember:

• Element, Tag, Attribute
• Nesting, Parent, Child
• Void Elements, Self-closing
• Block-level, Inline
• Global Attributes, id, class, data-*