HTML Template for a Blog

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

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

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


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

And in visual form:

Visualization of HTML structure
Figure 1: Visualization of HTML structure [PNG]

  • html
  • html5