You have 3 free guides left 😟
Unlock your guides
Unlock Cram Mode
You have 3 free guides left 😟
Unlock your guides

10.1 HTML Structure and Semantics

4 min read•july 31, 2024

HTML structure and semantics form the backbone of web development. They're like the skeleton and muscles of a webpage, giving it shape and meaning. Without them, your content would be a jumbled mess.

Understanding these concepts is crucial for creating well-organized, . Proper HTML structure and semantic elements not only make your code easier to read but also boost your site's SEO and user experience. It's the foundation you need to build awesome web projects.

HTML Document Structure

HTML Basics and Document Components

Top images from around the web for HTML Basics and Document Components

  • Advanced HTML ; Erik Wilde ; UC Berkeley School of Information View original

    Is this image relevant?

  • Beginner's Guide to Web Design - HTML Basics View original

    Is this image relevant?

  • Advanced HTML ; Erik Wilde ; UC Berkeley School of Information View original

    Is this image relevant?

1 of 3

Top images from around the web for HTML Basics and Document Components

  • Advanced HTML ; Erik Wilde ; UC Berkeley School of Information View original

    Is this image relevant?

  • Beginner's Guide to Web Design - HTML Basics View original

    Is this image relevant?

  • Advanced HTML ; Erik Wilde ; UC Berkeley School of Information View original

    Is this image relevant?

1 of 3
  • HTML (Hypertext Markup Language) forms the foundation for creating web pages and web applications
  • An HTML document comprises two primary sections enclosed within the 
    [<html>](https://www.fiveableKeyTerm:<html>)
    root element
    • The 
      [<head>](https://www.fiveableKeyTerm:<head>)
      contains metadata about the document
    • The 
      [<body>](https://www.fiveableKeyTerm:<body>)
      section holds the visible content of the web page
  • <!DOCTYPE html>
    declaration must appear as the first line of an document specifying the document type and version
  • HTML elements defined by tags enclosed in angle brackets (< >) typically come in pairs with opening and closing tags
  • Attributes provide additional information about HTML elements specified in the opening tag using the format 
    name="value"

Head and Body Elements

  • <head>
    element encompasses metadata about the document
    • Includes elements like 
      <[title](https://www.fiveableKeyTerm:title)>
      , 
      [<meta>](https://www.fiveableKeyTerm:<meta>)
      , and 
      <[link](https://www.fiveableKeyTerm:link)>
    • Contains information not directly visible on the web page
  • <body>
    element contains all visible content of the web page
    • Incorporates text, images, videos, and other media
    • Structures content using various HTML elements (headings, paragraphs, lists)
  • Example structure:
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    [<h1>](https://www.fiveableKeyTerm:<h1>)Welcome to My Website</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Semantic HTML Elements

Core Semantic Elements

  • elements provide meaning and structure to content enhancing accessibility and SEO
  • [<header>](https://www.fiveableKeyTerm:<header>)
    element represents introductory content or navigational links at the beginning of a section or page
  • [<nav>](https://www.fiveableKeyTerm:<nav>)
    element defines a set of navigation links within a document
  • [<main>](https://www.fiveableKeyTerm:<main>)
    element specifies the primary content of a document unique to the document excluding repeated content
  • [<footer>](https://www.fiveableKeyTerm:<footer>)
    element represents a footer for its nearest sectioning content or sectioning root element typically containing authorship, copyright, or contact information

Content-Specific Semantic Elements

  • [<article>](https://www.fiveableKeyTerm:<article>)
    element represents a self-contained composition in a document (blog posts, news stories, forum posts)
  • <section>
    element defines a thematic grouping of content typically with a heading within a document
  • `[
    ](https://www.fiveableKeyTerm:<aside>)`

    element used for content tangentially related to surrounding content (sidebars, pull quotes)

    • Examples of semantic structure:
    <header>
  <nav>
    <[ul](https://www.fiveableKeyTerm:ul)>
      [<li>](https://www.fiveableKeyTerm:<li>)<a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
  <aside>
    [<h2>](https://www.fiveableKeyTerm:<h2>)Related Links</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>

© 2023 Your Company

```

Organized HTML Code

Code Structure and Readability

  • Use proper indentation to improve readability and maintainability of HTML code typically using 2 or 4 spaces for each level of nesting
  • Implement a logical and of headings (
    <h1>
    to 
    [<h6>](https://www.fiveableKeyTerm:<h6>)
    ) to organize content and improve accessibility
  • Utilize lists (
    <ul>
    , 
    [<ol>](https://www.fiveableKeyTerm:<ol>)
    , and 
    <li>
    ) to group related items and create a clear structure for content
  • Apply appropriate nesting of elements to maintain a clear parent-child relationship and avoid overlapping tags
  • Use comments (
    <!-- comment -->
    ) to explain complex structures or provide notes for future reference or collaboration

Code Organization and Best Practices

  • Implement consistent naming conventions for classes and IDs to improve code organization and maintainability
  • Separate structure (HTML), presentation (CSS), and behavior (JavaScript) to create more modular and maintainable code
  • Group related elements together for better organization and easier maintenance
  • Use meaningful class and ID names that describe the purpose or content of the element
  • Example of well-organized HTML:
<!-- Header Section -->
<header class="site-header">
  <nav class="main-navigation">
    <!-- Navigation items -->
  </nav>
</header>

<!-- Main Content -->
<main class="content">
  <article class="blog-post">
    <h1 class="post-title">Article Title</h1>
    <p class="post-content">Article content...</p>
  </article>
  
  <aside class="sidebar">
    <!-- Sidebar content -->
  </aside>
</main>

<!-- Footer Section -->
<footer class="site-footer">
  <!-- Footer content -->
</footer>

Meta Tags and Document Head

  • <meta>
    tag specifies metadata about an HTML document (character encoding, viewport settings, description)
  • Charset attribute in the 
    <meta>
    tag specifies the character encoding for the HTML document typically set to "UTF-8" for modern web pages
  • Viewport 
    <meta>
    tag crucial for controlling how a page displays on mobile devices
  • Example of meta tags:
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A brief description of the page content">
  <title>Page Title</title>
</head>

  • <link>
    element defines relationships between the current document and external resources (stylesheets, favicons)
  • <a>
    (anchor) element creates hyperlinks to other web pages, files, or locations within the same page
  • [<img>](https://www.fiveableKeyTerm:<img>)
    element embeds images in an HTML document with the src attribute specifying the image source and the providing alternative text for accessibility
  • Implement responsive images using the srcset and sizes attributes of the 
    <img>
    element or by using the 
    <picture>
    element for more complex scenarios
  • Examples of links and images:
<link rel="stylesheet" href="styles.css">
<a href="https://example.com">Visit Example.com</a>
<img src="image.jpg" alt="Description of the image" width="300" height="200">
<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
© 2024 Fiveable Inc. All rights reserved.
AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.
Fiveable
About Us
About FiveableBlogCareersTestimonialsCode of ConductTerms of UsePrivacy PolicyCCPA Privacy Policy
Resources
Cram ModeAP Score CalculatorsStudy GuidesPractice QuizzesGlossaryCrisis Text LineRequest a Feature
Stay Connected
© 2024 Fiveable Inc. All rights reserved.
AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.
About Us
About FiveableBlogCareersTestimonialsCode of ConductTerms of UsePrivacy PolicyCCPA Privacy Policy
Resources
Cram ModeAP Score CalculatorsStudy GuidesPractice QuizzesGlossaryCrisis Text LineRequest a Feature
© 2024 Fiveable Inc. All rights reserved.
AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.
Back
Glossary
Glossary
Next