HTML Template for a Blog

March 18, 2016

Structuring a blog website using modern HTML 5 might look something like this. (Adapted from Stack Overflow.)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <header>
      <img src="logo.jpg" alt="My Blog">
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Posts</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>

    <main>
      <section id=sidebar"></section>
      <section id="main">
        <article>
          <!-- Blog post #1 -->
          <section id="introduction"></section>
          <section id="content"></section>
          <section id="conclusion"></section>
        </article>
        <article>
          <!-- Blog post #2 -->
        </article>
        <article>
          <!-- Blog post #3 -->
        </article>
        <article>
          <!-- Blog post #4 -->
        </article>
      </section>
      <aside></aside>
    </main>

    <footer></footer>

    <!-- Put scripts down here -->
    <script src="dependency.js"></script>
    <script src="app.js"></script>
  </body>
</html>

And in visual form:

Visualization of Blog HTML