2 HTML Structure and Semantics
Learn how HTML structures web pages, how semantic elements clarify the purpose of content, and how to make page structure and media more accessible.
and Meaningful Structure
(HyperText Markup Language) describes the structure and meaning of web content. Elements mark up content such as , paragraphs, , and images so browsers and assistive technologies can interpret it. CSS controls presentation, while JavaScript can add behavior.
Using an element for its intended purpose is called . For example, use a navigation element to identify navigation rather than choosing a generic container merely because it is easy to style. Semantic markup communicates purpose; CSS can change appearance without changing that meaning.
The
A typical page follows a : the root <> element contains a <head> for document information and a <body> for page content. The doctype tells browsers to use modern standards mode. Metadata in the head can identify character encoding, set the page title, and provide a viewport setting. The lang attribute identifies the page language, helping assistive technology pronounce content appropriately.
Elements such as <header>, <nav>, <main>, and <footer> describe common page regions. Use <article> for self-contained content and <section> to group related content, usually under a heading. When no more meaningful element fits, a generic <div> can serve as a container.
Takeaway: Keep document information in the head and the page’s content in the body; choose page-region elements by purpose.
Organizing Content with
—from <h1> through <h6>—organize content by hierarchy, not by font size. A page’s main topic commonly uses <h1>, major sections use <h2>, and subsections use <h3>. Keep the sequence logical and choose that describe the content that follows.
For example, if “Plants in the garden” is a section marked with <h2>, a subsection within it should use <h3>. CSS can style heading levels independently of their rank. Do not use a heading only to make ordinary text appear large or bold.
A logical outline helps readers scan a page and lets screen-reader users navigate by section.
and Navigation
An <a> element with an href attribute creates a link. Link text should make its destination or action understandable, even when read outside the surrounding paragraph. Labels such as “click here” do not explain where the link leads.
A link can point to an element on the same page by using a fragment identifier that matches that element’s id:
navigate to destinations; buttons perform actions. Choosing the element that matches the task gives users the appropriate built-in browser behavior.
Images and Text Alternatives
The <img> element embeds an image and is a void element, so it does not have a closing tag. Its src attribute specifies the image file. The alt attribute provides that conveys an image’s relevant information or function.
Write in context rather than simply repeating an adjacent caption. If an image is purely decorative, use an empty alternative, alt="", so assistive technology can skip it. When an image is a link, its alternative should help communicate the link’s purpose.
Accessible Markup in Practice
Accessible markup brings these choices together: use native semantic elements, keep a logical source order, write descriptive and link text, and identify the correct page language. These choices help browsers expose page structure to assistive technologies and make content easier to navigate.
Accessibility depends on meaning and context, not merely on whether markup is present. Clear semantic structure supports both understanding and navigation.
Takeaway: Build pages around the meaning and relationships of their content, and provide useful text alternatives for images.