HTML and SEO Lecture Notes

Jun 27, 2024

HTML and SEO

Introduction

  • Speaker: Hayden Adams (Designer who codes)
  • Topic: HTML and SEO
  • Primary Sources: Google SEO Starter Guide, WC3 (World Wide Web Consortium)
  • Links: Provided in the description for both references

Setting Up HTML Document

  • Using VS Code to write HTML
  • Initial Setup:
    • Declare document type: <!DOCTYPE html>
    • HTML Tags: Enclose entire document within <html> tags

HTML Document Structure

  1. Head Section

    • Contains meta-information and settings
    • <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO and HTML Guide</title>
    <meta name="description" content="This guide takes you through the basics of how to structure your HTML so it helps with your SEO">
</head>
    • UTF-8 Character Set: Specifies English characters
    • Viewport Settings: Ensures responsive design
    • Title: Must be descriptive for SEO
    • Meta Description: 160 characters describing page content

  2. Body Section

    • Contains the visible content of the webpage
    • Basic setup: 
      <body>
    <nav>
        <!-- Navigation links -->
    </nav>
    <header>
        <!-- Optional header content -->
    </header>
    <main>
        <h1>SEO and HTML Guide for 2024</h1>
        <h2>Subheader</h2>
        <p>This is a paragraph.</p>
        <ul>
            <li>List item</li>
        </ul>
        <ol>
            <li>Step 1</li>
        </ol>
    </main>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Navigation (nav)

  • HTML for navigation menus
    • <nav>: Encloses navigation links
    • <ul> and <li>: For listing navigation items
    • Example for an about page link: 
      <nav>
    <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="2024-board.html">2024 Board of Directors</a></li>
    </ul>
</nav>

Headers and Main Content

  • Header: Optional, sits below nav but above main section
  • Main Content: Important content enclosed within <main> tags
  • Headings Structure:
    • h1: Main heading (should only be one per page)
    • h2: Subheadings (multiple allowed)
    • h3, h4, h5, h6: Sub-subheadings (should follow hierarchy)

Paragraphs and Lists

  • Paragraphs: Enclosed within <p> tags
  • Lists: Ordered (<ol>) and unordered (<ul>) lists

Adding Images and Accessibility

  • Use <img> tags for images
  • Remember to include alt attribute for accessibility
  • Example for Facebook icon: 
    <img src="images/facebook.svg" alt="Facebook Icon">
  • Links for Images: Use <a> tags to make images clickable
  • ARIA Labels: Describe the purpose of a link 
    <a href="https://facebook.com" aria-label="My dog spot's fan page on Facebook">
    <img src="images/facebook.svg" alt="Facebook Icon">
</a>

Footer

  • Encloses the bottom section of the webpage
  • Example: 
    <footer>
    <!-- Footer content here -->
</footer>

Improving Readability and SEO

  • Descriptive Links: Ensure link text describes destination content
  • Use ARIA labels for better accessibility and SEO
  • Example: 
    <a href="2024-board.html" aria-label="Read more about the 2024 Board of Directors">Read more</a>

Conclusion

  • Importance of semantic HTML structure for SEO
  • Ensuring accessibility with proper use of tags and attributes

Additional Notes

  • Emphasis on structure and accessibility for better SEO results