HTML Document Structure and Basic Elements

About 994 wordsAbout 12 min

2025-08-06

Note

This chapter covers the fundamental building blocks of HTML documents, including the document type declaration, essential tags, and the hierarchical structure that forms the foundation of web pages.

Learning Outcomes

Understand the basic HTML document structure and essential tags
Comprehend the hierarchical nature of HTML and the Document Object Model (DOM)
Learn about semantic HTML elements and their proper usage
Understand the separation of concerns in modern web development

HTML Document Structure

Every HTML document follows a standard structure that provides the foundation for web content. Let's explore the essential components:

The DOCTYPE Declaration

<!DOCTYPE html>

The DOCTYPE declaration defines the document type and HTML version. In HTML5, this is simplified to <!DOCTYPE html>, which tells the browser to render the page in standards mode.

The Root Element

<html lang="en">
</html>

The <html> element is the root element of an HTML page. The lang attribute specifies the language of the document, which is important for accessibility and SEO.

The Head Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>

The <head> section contains meta-information about the document:

<meta charset="UTF-8">: Specifies character encoding
<meta name="viewport">: Controls viewport settings for responsive design
<title>: Sets the page title displayed in browser tabs and search results

The Body Section

<body>
  <!-- Page content goes here -->
</body>

The <body> element contains all the visible content of the web page.

Essential HTML Elements

Text Elements

Headings

HTML provides six levels of heading elements, from <h1> (most important) to <h6> (least important):

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

Best Practice: Use headings in a logical, hierarchical order to improve accessibility and SEO.

Paragraphs

The <p> element defines paragraphs of text:

<p>This is a paragraph of text. It can contain multiple sentences and provide meaningful content to the user.</p>
<p>This is another paragraph. Empty lines between paragraphs in the source code are collapsed into single line breaks by the browser.</p>

Text Formatting

HTML provides various elements for text formatting:

<strong>Important text</strong>  <!-- Typically displayed as bold -->
<em>Emphasized text</em>        <!-- Typically displayed as italic -->
<mark>Highlighted text</mark>    <!-- Highlighted with background color -->
<small>Small text</small>        <!-- Smaller font size -->
<del>Deleted text</del>          <!-- Strikethrough text -->
<ins>Inserted text</ins>          <!-- Underlined text -->

List Elements

Unordered Lists

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Ordered Lists

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

Description Lists

<dl>
  <dt>Term 1</dt>
  <dd>Description of term 1</dd>
  <dt>Term 2</dt>
  <dd>Description of term 2</dd>
</dl>

Link Elements

Hyperlinks

<a href="https://example.com">External link</a>
<a href="page2.html">Internal link</a>
<a href="mailto:user@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>

Image Elements

<!-- Basic image -->
<img src="image.jpg" alt="Description of the image">

<!-- Image with dimensions -->
<img src="image.jpg" alt="Description" width="300" height="200">

<!-- Responsive image -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">

Important: The alt attribute provides alternative text for screen readers and when images cannot be displayed.

HTML Attributes

HTML elements can have attributes that provide additional information:

Global Attributes

These attributes can be used on most HTML elements:

<div id="main-content" class="container" title="Tooltip text" data-info="custom data">
  Content
</div>

id: Unique identifier for the element
class: CSS class names for styling
title: Additional information displayed as a tooltip
data-*: Custom data attributes for JavaScript

Event Attributes

<button onclick="alert('Button clicked!')">Click me</button>
<div onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='transparent'">
  Hover over me
</div>

HTML Comments

Comments are not displayed in the browser but are useful for documentation:

<!-- This is a comment -->
<!-- This is a
multi-line comment -->

The Document Object Model (DOM)

HTML documents form a tree-like structure called the DOM:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <p>Paragraph with <strong>bold text</strong></p>
  </body>
</html>

This structure creates a hierarchy where elements can be nested within other elements. The DOM allows JavaScript to interact with and manipulate the HTML structure dynamically.

Best Practices

Semantic HTML

Use HTML elements for their intended purpose:

<!-- Good - semantic structure -->
<header>
  <h1>Site Title</h1>
  <nav>Navigation menu</nav>
</header>

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

<footer>
  <p>Footer information</p>
</footer>

Accessibility

Use proper heading hierarchy
Provide alternative text for images
Ensure sufficient color contrast
Use descriptive link text

Performance

Minimize HTTP requests by combining files
Optimize image sizes and formats
Use efficient CSS and JavaScript

Exercises

Create a Basic Page: Build a simple HTML page with proper structure including head and body sections.
Add Content: Include various text elements, lists, and links to practice different HTML tags.
Image Integration: Add images with proper alt attributes and responsive design.
Semantic Structure: Convert a simple div-based layout to use semantic HTML5 elements.

Understanding the basic structure of HTML is fundamental to web development. A well-structured HTML document provides a solid foundation for adding styles with CSS and functionality with JavaScript. Remember to use semantic HTML elements appropriately and follow best practices for accessibility and performance.

Glossary

DOCTYPE: Declaration that specifies the HTML version being used
DOM: Document Object Model - the tree-like structure of HTML elements
Semantic HTML: HTML elements that clearly describe their meaning to both browsers and developers
Attributes: Additional information provided to HTML elements
Accessibility: The practice of making web content usable for people with disabilities

Changelog

8/14/25, 7:26 AM

View All Changelog

65724-feat: add basic notes for HTMLon 8/14/25

Copyright

License under:Attribution-NonCommercial-NoDerivatives 4.0 International (CC-BY-NC-ND-4.0)