Day 2: HTML and Semantic Markup

Harshit SisodiaHarshit Sisodia
2 min read

“Day 2: Building the Foundation with HTML and Semantic Markup”

Introduction:

  • Briefly introduce HTML as the backbone of web development.

  • Highlight the importance of semantic markup for accessibility, SEO, and readability.

Example:

"HTML is the skeleton of any website, and semantic markup is the art of making that skeleton meaningful. Today, we’ll explore how to use HTML tags effectively and why semantics matter in building accessible and SEO-friendly web pages."

What is HTML?

    • Definition: HyperText Markup Language.

      • Explain its role in structuring web pages.

  2. Basic Structure of an HTML Document:

    • Example code:

        <!DOCTYPE html>  
  <html lang="en">  
  <head>  
      <meta charset="UTF-8">  
      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
      <title>My First Page</title>  
  </head>  
  <body>  
      <h1>Welcome to Full-Stack Development!</h1>  
  </body>  
  </html>

  3. Semantic Markup Basics:

    • Define semantic elements: tags that convey meaning.

    • Examples of semantic tags:

      • <header>

      • <nav>

      • <main>

      • <article>

      • <section>

      • <footer>

    • Why they’re better than generic <div> tags.

  4. Building a Simple Semantic Layout:

    • Example code:

        <header>  
      <h1>My Blog</h1>  
      <nav>  
          <ul>  
              <li><a href="#home">Home</a></li>  
              <li><a href="#about">About</a></li>  
              <li><a href="#contact">Contact</a></li>  
          </ul>  
      </nav>  
  </header>  
  <main>  
      <article>  
          <h2>Day 2: HTML Basics</h2>  
          <p>Today, we learned about the basics of HTML and semantic markup.</p>  
      </article>  
  </main>  
  <footer>  
      <p>© 2024 My Blog</p>  
  </footer>

  5. Importance of Accessibility and SEO:

    • Semantic markup helps screen readers navigate content.

    • Better search engine indexing with meaningful tags.

Practical Task for Readers:

  • Build a webpage with the following sections:

    • Header: Contains a title and navigation links.

    • Main: Includes an article with a title and some text.

    • Footer: Contains copyright information.

  • Validate the HTML using W3C Validator.

Conclusion:

  • Recap the day’s key points: HTML’s role, semantic tags, and their importance.

  • Encourage readers to experiment with creating semantic layouts.

  • Tease Day 3: "Tomorrow, we’ll bring style to our web pages with CSS basics and Flexbox magic."

0
Subscribe to my newsletter

Read articles from Harshit Sisodia directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTML5Web DevelopmentDeveloperintroductionintro to programming

Written by

Harshit Sisodia
Harshit Sisodia