Day 1 - Semantic Elements

Semantic elements clearly describe their meaning to both the browser and the developer.

1. Non-Semantic vs. Semantic

Before HTML5, developers used <div> tags even for structural elements. Now, we use specific tags that describe the functionality.

Code (Non-Semantic - The Old Way):

          <div id="header">Header</div>

          <div id="nav">Navigation</div>

          <div id="main">

              <div class="article">Article
          Content</div>

          </div>

          <div id="footer">Footer</div>

Code (Semantic - The New Way):

          <header>Header</header>

          <nav>Navigation</nav>

          <main>

              <article>Article
          Content</article>

          </main>

          <footer>Footer</footer>

2. Full Semantic Layout

A visual representation of how these elements structure a page.

Code:

          <header>

              <h1>Header</h1>

          </header>

          <nav> Navigation Links </nav>

          <div class="container">

              <aside>

                  <h3>Aside</h3>

                  <p>Sidebar
          content, ads, etc.</p>

              </aside>

              <main>

                  <h2>Main
          Content</h2>

                  <article>

                      <h3>Article</h3>

                      <p>Blog
          post or news story.</p>

                      <figure>

                          <p>[Image/Diagram]</p>

                          <figcaption>Figure
          Caption</figcaption>

                      </figure>

                      <section>

                          <h4>Section</h4>

                          <p>Related
          group of content.</p>

                      </section>

                  </article>

              </main>

          </div>

          <footer>Footer Content</footer>

Output:

<main>

3. Non-Semantic Layout (Visual Equivalent)

The exact same layout built using only <div> tags. Notice the output is identical, but the code lacks meaning.

Code:

          <div class="header">

              <h1>Header</h1>

          </div>

          <div class="nav"> Navigation Links </div>

          <div class="container">

              <div class="aside">

                  <h3>Aside</h3>

                  <p>Sidebar
          content, ads, etc.</p>

              </div>

              <div class="main">

                  <h2>Main
          Content</h2>

                  <div
          class="article">

                      <h3>Article</h3>

                      <p>Blog
          post or news story.</p>

                      <div
          class="figure">

                          <p>[Image/Diagram]</p>

                          <div
          class="figcaption">Figure Caption</div>

                      </div>

                      <div
          class="section">

                          <h4>Section</h4>

                          <p>Related
          group of content.</p>

                      </div>

                  </div>

              </div>

          </div>

          <div class="footer">Footer Content</div>

Output:

< Previous: HTML Special Characters | Next: Form Elements >