Creating a Web Page

📖 Creating a Web Page

Tags and Elements

HTML Tag: Tags are the building blocks of HTML, written inside angle brackets like <p> and </p>. They define the type of content.
HTML Element: An element includes the opening and closing tags along with the content inside. Example: <p>This is a paragraph.</p>

Basic Page Structure

Every web page starts with a standard structure so that browsers can correctly interpret and render the content.

<!DOCTYPE html>: Declares that this document uses HTML5. It must be the very first line in your file to ensure correct rendering.
<html></html>: Wraps the entire document. All other tags must appear inside these.
<head></head>: Contains meta information like page title, character encoding, and linked resources.
<body></body>: Holds all the visible content on the page: text, images, and interactions.

Example HTML Page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Your Page Title</title>
  </head>
  <body>
    <!-- Page content goes here -->
  </body>
</html>

What Goes Inside the `<body>`?

Once your page structure is in place, most of your development time will focus inside the <body> tag — this is where all visible content lives. Everything a user sees or interacts with on your page will be placed here: headings, text, images, buttons, links, forms, and layout containers.

To organize that content clearly and consistently, HTML offers a set of display rules that define how elements behave — block-level elements stack vertically, while inline elements flow within a line. Understanding this difference helps you control how content appears and aligns on the screen.

Block-Level and Inline Elements

HTML elements are grouped into two main types based on how they behave visually: block-level and inline. Understanding this distinction is key to controlling layout, spacing, and structure in your pages.

Block-level elements (like <div>, <p>, and <section>) take up the full width of their container and begin on a new line. They're used to build the overall layout and stack sections of content.

Inline elements (like <span>, <a>, and <strong>) appear within the flow of a line and do not break onto a new line. They're ideal for emphasizing or modifying small pieces of content inside a block-level container.

Example Block-Level Elements

<div>: A generic container, often styled with CSS.
<p>: Creates a paragraph of text.
<section>: Groups related content.
<article>: Represents a standalone piece of content.

Example Inline Elements

<a>: Creates a hyperlink.
<span>: A generic inline container for styling.
<strong>: Marks important text (usually bold).
<em>: Marks emphasized text (usually italic).
<img>: Displays an image with optional attributes.

Hover for title text

<img src="cat.jpg" alt="Cat with sunglasses" title="Descriptive information on hover.">

💡 Tip: The <img> tag is technically an inline element, meaning it flows with text — but because it has width and height, it often behaves more like a block. Most developers style it with display: block or wrap it in a container to control layout and spacing more predictably.

HTML5 Semantic Elements

Semantic HTML elements clearly describe their meaning in a way that both browsers and developers can understand. These elements make your code more readable, accessible, and easier to maintain. They fall into two broad categories: structural containers and content-level tags.

Structural Containers

<header>: Defines introductory content, site-wide banners, or navigation links.
<main>: Represents the primary content area of your page — only one per page.
<footer>: Contains page or section-level footer content like copyright or contact info.
<nav>: Wraps site navigation links or menus.
<section>: Groups related content into thematic sections with their own headings.
<article>: Encapsulates self-contained content like blog posts, comments, or news stories.
<aside>: Represents tangential or sidebar content related to the surrounding area.

Content-Level Semantics

<h1>–<h6>: Used to define the document's heading structure and establish content hierarchy.
<p>: Wraps paragraphs of readable text — one of the most frequently used semantic tags.

Organizing Page Content with Containers

Good HTML structure starts with clear content organization. By nesting semantic containers meaningfully, you help browsers, developers, and assistive technologies understand your page's layout and logic. This improves both accessibility and maintainability.

Structuring Page Regions

Use high-level elements like <main>, <section>, and <article> to break your page into distinct content blocks. Each container should reflect the type of content it holds — for example, <main> for primary content, <nav> for site links, and <footer> for legal or contact information.

<main>
  <h1>Marketing Proposal</h1>
  <section>
    <h2>Project Overview</h2>
    <p>This portfolio site showcases my recent work in web design, including personal experiments and client-based projects.</p>
  </section>
  <section>
    <h2>Featured Project: Local Farmers Market</h2>
    <p>A responsive site built to promote local vendors and weekly events. Includes an interactive map, gallery, and contact form.</p>
  </section>
</main>

In this example, the <main> element contains two <section> elements, each with its own heading. This structure clearly separates different parts of the content while maintaining a logical flow.

💡 Pro Tip: Prefer semantic containers like <section>, <article>, or <nav> when they match the meaning of your content. Use <div> or <span> only when you need a structural wrapper for layout, styling, or scripting — and no semantic alternative fits. Generic containers are useful, but they shouldn't be your first choice.

Maintaining Content Hierarchy

As you build your layout, maintain a clear content hierarchy. Headings (<h1>–<h6>) signal levels of importance, so they must follow a logical sequence. A <section> that starts with an <h2> should nest <h3> elements beneath it — not skip levels.

Organizing your content with thoughtful containers and matching headings ensures screen readers and search engines can parse your page efficiently. It also helps your teammates understand the structure of your code at a glance.

💡 Pro Tip: When nesting semantic elements, keep heading levels consistent with your structure. Avoid skipping levels — for example, don't jump from <h2> to <h5> — and use headings to clarify the relationships between sections.

Avoiding Common Nesting Errors

Proper nesting is essential for valid, accessible HTML. Each element must open and close in the correct order — like stacking boxes neatly, not tangling them. If you open one tag, then another, you must close the second before closing the first. This is called “proper tag nesting.”

<strong><h1>My Page Heading</strong></h1> <!-- ❌ Invalid -->

The example above is incorrect because it closes the <strong> tag before the <h1> tag. It also tries to wrap a block element with an inline tag — which isn't allowed in HTML5.

Instead, apply inline formatting *within* a block-level tag:

<h1><strong>My Page Heading</strong></h1> <!-- ✅ Valid -->

Instead, apply inline formatting within a block-level tag — and use semantic tags only when their meaning fits the content.

<p>This is a <strong>very important</strong> detail users shouldn’t miss.</p> <!-- ✅ Semantically meaningful -->

If you're trying to visually emphasize a heading — like bolding your <h1> — it's better to use CSS rather than semantic tags meant for meaning.

<h1>My Page Heading</h1>
<style>
  h1 {
    font-weight: bold; /* ✅ Style handled with CSS */
  }
</style>

💡 Tip: HTML is about meaning — not appearance. Tags like <strong> and <em> should be used when the content is truly important or emphasized, not just to make it bold or italic. Let CSS handle the visuals.

Also avoid placing structural elements (like <div> or <section>) inside inline elements (like <a> or <span>). This violates the content model and can cause unpredictable rendering in browsers.

⚠️ Important: Always validate your HTML using the W3C Markup Validator. Many layout bugs or accessibility issues are caused by invalid nesting that's hard to spot without a tool.

Attributes and Their Usage

Attributes give HTML elements additional information or behavior, such as linking, styling, or improving accessibility.

href: Sets the URL for links. Example: <a href="https://example.com">Visit</a>
alt: Describes the image for screen readers. Example: <img src="image.jpg" alt="Description">
id: Gives an element a unique name. Example: <nav id="top-nav">...
class: Assigns a reusable label for styling. Example: <p class="intro-text">...
title: Displays tooltip info on hover. Example: <p title="Tooltip info">Text</p>

Accessibility Features

Web accessibility means designing your pages so that everyone — including people with disabilities — can understand, navigate, and interact with your content effectively. It's a core part of good web design, not an optional add-on.

Accessibility affects every part of your page, from the way headings are structured to how forms are labeled and images are described. When you build accessible pages, you improve usability for everyone — including people using screen readers, those with low vision, motor impairments, or cognitive challenges.

Best Practices for Accessible HTML

Use Semantic Elements: Elements like <header>, <main>, <nav>, and <footer> help screen readers understand the structure and purpose of each part of the page.
Include Alternative Text: Every <img> tag should use alt to describe the image for users who can't see it.
Use Headings in Order: Heading tags (<h1> through <h6>) should follow a logical outline. Don't skip levels or use them only for styling.
Label Form Controls: Every form input should have a corresponding <label> to explain its purpose, especially for screen reader users.
Ensure Sufficient Color Contrast: Text and backgrounds must have enough contrast to be readable for users with vision impairments. Tools like WAVE can help check this.
Support Keyboard Navigation: All functionality — links, buttons, forms — should be usable with a keyboard alone, without requiring a mouse.

When to Use ARIA

ARIA (Accessible Rich Internet Applications) attributes add extra meaning when HTML alone isn't enough — especially in custom interactive components like modals, sliders, or tab panels. But they should only be used when needed.

aria-label: Provides a hidden label for elements that don't have visible text. Useful for buttons with only icons.

Here's an example of a button that uses aria-label to provide an accessible name:

<button type="button" aria-label="Close">X</button>

Remember: the best accessibility starts with well-written HTML. ARIA can enhance it, but it can't fix broken or unclear code. Build accessibly from the start, and you'll make the web better for everyone.

Validating Your Code

Validation helps you catch errors early, ensuring your page meets web standards and behaves as expected.

Option 1: Validate by URL

Enter your site address if it's published online.

Option 2: Validate by File

Upload your HTML file directly from your computer.

Option 3: Validate by Code

Paste your HTML directly into the text area.

Visit the W3C Validator and select your preferred method. Click “Check” to see results and fix any issues reported.

Example

Here's a complete example of a basic semantic HTML page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Page</h1>
    </header>
    <main>
      <section>
        <h2>About</h2>
        <p>This is an example section.</p>
        <img src="images/mypic.png" alt="Descriptive text for missing mypic.png">
      </section>
    </main>
    <footer>
      <p>Footer Content Here</p>
    </footer>
  </body>
</html>

Additional Resources

Explore these trusted sources to learn more:

Last updated: July 30, 2025 at 5:58 PM