HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLElements & Attributes Deep Dive
HTML Foundations

Elements & Attributes Deep Dive

HTML elements are the building blocks of web pages. Master how elements work, their anatomy, and how attributes provide additional information and functionality.

Anatomy of an HTML Element

An HTML element typically consists of three parts: an opening tag, content, and a closing tag.

HTML
<tagname attribute="value">Content goes here</tagname>
   ↓         ↓         ↓            ↓              ↓
Opening  Attribute  Value      Content        Closing
  Tag                                           Tag
Complete Element Example
HTML
<p class="intro" id="first-paragraph">
    This is a paragraph with attributes.
</p>

Breaking it down:

  • <p> - Opening tag (defines a paragraph)
  • class="intro" - Attribute for CSS styling
  • id="first-paragraph" - Unique identifier for the element
  • This is a paragraph... - The content
  • </p> - Closing tag (ends the paragraph)

Block vs. Inline Elements

HTML elements are divided into two main display categories: block-level and inline elements.

Key Differences:

Block ElementsInline Elements
Start on a new lineFlow within text, don't break lines
Take up full width availableOnly take up necessary width
Can contain block and inline elementsCan only contain inline elements and text
Examples: <div>, <p>, <h1>Examples: <span>, <a>, <strong>
Block vs. Inline Example
HTML
<!-- Block elements (each on new line) --&gt;
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<div>This is a div container</div>

<!-- Inline elements (within text flow) --&gt;
<p>This paragraph contains <strong>bold text</strong> and <em>italic text</em> inline.</p>

Common Block-Level Elements

<div> - Division/Container

Purpose: Generic container for grouping content

Use case: Layout sections, applying styles to groups of elements

HTML
<div class="header">
    <h1>Welcome</h1>
    <p>Subtitle text</p>
</div>

<p> - Paragraph

Purpose: Text paragraphs

Use case: Body text, article content

HTML
<p>This is a paragraph of text. Browsers automatically add space before and after.</p>

<h1> to <h6> - Headings

Purpose: Section headings (hierarchical)

Use case: Document structure, SEO

HTML
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>

<ul>, <ol>, <li> - Lists

Purpose: Unordered and ordered lists

Use case: Navigation menus, feature lists, steps

HTML
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>First step</li>
    <li>Second step</li>
</ol>

Common Inline Elements

<span> - Inline Container

Purpose: Generic inline container

Use case: Styling specific text portions

HTML
<p>The price is <span class="highlight">$99.99</span> today!</p>

<a> - Anchor/Link

Purpose: Hyperlinks to other pages or sections

Use case: Navigation, external links

HTML
<a href="https://example.com">Visit Example</a>
<a href="#section2">Jump to Section 2</a>

<strong> and <em> - Emphasis

Purpose: Semantic emphasis (strong importance, emphasis)

Use case: Important text, stressed words

HTML
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p>I <em>really</em> need to finish this.</p>

<img> - Image

Purpose: Embed images

Use case: Photos, illustrations, icons

HTML
<img src="logo.png" alt="Company Logo" width="200" height="100">

Void (Self-Closing) Elements

Some elements don't have content and therefore don't need a closing tag. These are called void elements or empty elements.

ElementPurposeExample
<br>Line breakLine 1<br>Line 2
<hr>Horizontal rule (divider)<hr>
<img>Image<img src="pic.jpg" alt="Photo">
<input>Form input field<input type="text" name="username">
<meta>Metadata<meta charset="UTF-8">
<link>External resource link<link rel="stylesheet" href="style.css">
💡
HTML5 Note: In HTML5, the trailing slash (/>) is optional for void elements. Both <br> and <br /> are valid.

HTML Attributes Explained

Attributes provide additional information about HTML elements. They appear in the opening tag and follow a name="value" format.

Attribute Syntax Rules:

  • Attributes go in the opening tag only
  • Format: attribute-name="value"
  • Use quotes (double or single) around values
  • Multiple attributes separated by spaces
  • Attribute names are case-insensitive (but lowercase is conventional)
Multiple Attributes Example
HTML
<img src="photo.jpg" alt="Sunset" width="800" height="600" class="featured">

Universal (Global) Attributes

These attributes can be used on any HTML element:

id

Purpose: Unique identifier for an element

Rules: Must be unique on the page, used for CSS/JS targeting

HTML
<div id="header">...</div>

class

Purpose: One or more class names for CSS styling

Rules: Can repeat across elements, space-separated for multiple classes

HTML
<p class="intro highlight">Text</p>

style

Purpose: Inline CSS styles

Warning: Avoid for maintainability—use external CSS instead

HTML
<p style="color: red; font-size: 18px;">Styled text</p>

title

Purpose: Tooltip text that appears on hover

Use case: Additional information, abbreviation expansions

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

data-*

Purpose: Custom data attributes for JavaScript

Use case: Store extra information without affecting display

HTML
<button data-user-id="123" data-action="delete">Delete</button>

lang

Purpose: Language of element content

Use case: Accessibility, translation tools, SEO

HTML
<p lang="es">Hola mundo</p>

Element-Specific Attributes

Some attributes are specific to certain elements:

<a> (Link) Attributes:

  • href - Destination URL
  • target - Where to open link (_blank, _self, etc.)
  • rel - Relationship to target (nofollow, noopener)
HTML
<a href="https://example.com" target="_blank" rel="noopener">External Link</a>

<img> (Image) Attributes:

  • src - Image file path (required)
  • alt - Alternative text for accessibility (required)
  • width and height - Dimensions (optional but recommended)
HTML
<img src="logo.png" alt="Company Logo" width="200" height="100">

<input> (Form Input) Attributes:

  • type - Input type (text, email, password, etc.)
  • name - Name for form submission
  • value - Default/current value
  • placeholder - Hint text
  • required - Makes field mandatory
HTML
<input type="email" name="user_email" placeholder="Enter email" required>

Boolean Attributes

Some attributes are boolean (true/false). Their presence = true, absence = false.

Boolean Attributes
HTML
<!-- These are equivalent: --&gt;
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">

<!-- Disabled button --&gt;
<button disabled>Can't Click Me</button>

<!-- Required field --&gt;
<input type="text" required>

<!-- Readonly field --&gt;
<input type="text" value="Cannot edit" readonly>

Best Practices

✅ Do

  • Use semantic elements (<header>, <nav>, <article>)
  • Always include alt text for images
  • Use id for unique elements, class for reusable styles
  • Nest elements properly (close in reverse order)
  • Use lowercase for element and attribute names
  • Quote all attribute values

❌ Don't

  • Use <div> for everything (lack of semantics)
  • Forget closing tags (except void elements)
  • Overlap tags incorrectly
  • Use inline styles excessively
  • Duplicate id values on same page
  • Use deprecated elements (<font>, <center>)

What's Next?

Now that you understand elements and attributes, let's move on to document architecture and learn about DOCTYPE declarations.

Next: DOCTYPE & HTML Declaration →