Introduction

In this article, we will guide you through the process of building your very first HTML blog. We'll explain each HTML element used in detail, allowing you to understand their purpose and how to use them effectively. By the end of this guide, you will have the knowledge to create a basic HTML blog. Let's get started!

You can get the entire code from here: https://github.com/dotslashbit/computize_blog/tree/main/html_101

Setting Up the HTML Structure

To begin, let's set up the basic structure of your HTML blog. Open a new HTML file and enter the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Your Blog Title</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>: This declaration tells the browser that the document is written in HTML5, the latest version of HTML.
<html>: The root element of an HTML page. All other elements will be contained within this element.
<head>: The head section of the HTML document where you define metadata, such as the title of your blog.
<title>: The title element sets the title of the blog that appears in the browser's title bar.

Adding the Blog Header

Next, let's create the header section for your blog, including the blog title and navigation menu. Add the following code within the <body> element:

<header>
  <h1>Your Blog Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<header>: This element represents the header section of your blog, typically containing the main heading and navigation menu.
<h1>: The <h1> element denotes the main heading of the page, which is the title of your blog.
<nav>: The <nav> element is used to define a section containing navigation links.
<ul>: The unordered list element <ul> creates a list of navigation items.
<li>: The list item element <li> represents each individual navigation item.
<a>: The anchor element <a> defines a hyperlink. In this case, it creates clickable links for navigation.

Creating a Blog Post

Let's add a blog post to your HTML blog. Insert the following code within the <body> element:

<article>
  <h2>Blog Post Title</h2>
  <img src="image.jpg" alt="Blog Image">
  <p>Author: John Doe</p>
  <p>Date: May 29, 2023</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

<article>: The <article> element represents a self-contained composition, such as a blog post, within a document.
<h2>: This heading element <h2> indicates the title of the blog post.
<img>: The <img> element allows you to insert an image into your blog. The src attribute specifies the image source, and the alt attribute provides alternative text for accessibility.
<p>: The <p> element is used to represent paragraphs of text. In this case, it contains the author name, date, and the content of the blog post.

Including a Comment Form

To allow users to submit comments on your blog post, let's add a comment form. Place the following code within

the <article> element:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Your name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Your email" required>

  <label for="comment">Comment:</label>
  <textarea id="comment" name="comment" placeholder="Your comment" required></textarea>

  <input type="submit" value="Submit">
</form>

<form>: The <form> element represents a section that contains interactive controls, allowing users to input and submit data.
<label>: The <label> element associates a text label with a form control. It enhances accessibility by providing a textual description for the associated input.
<input>: The <input> element is used to create various types of input fields. In this case, we have text fields (type="text"), email fields (type="email"), and a submit button (type="submit").
<textarea>: The <textarea> element allows users to enter multi-line text. It is suitable for longer comments or messages.

Let's create a sidebar section for your blog. Insert the following code within the <body> element:

<aside>
  <h3>Categories</h3>
  <ul>
    <li>HTML</li>
    <li>HTML5</li>
    <li>CSS</li>
  </ul>
</aside>

<aside>: The <aside> element represents content that is tangentially related to the main content. In this case, it contains a list of categories for your blog posts.
<h3>: The <h3> element denotes a subheading within the sidebar section.
<ul>: The <ul> element creates an unordered list within the sidebar.
<li>: Each list item <li> represents an individual category.

Adding a Table

To present data in a structured format, we can use the <table> element. Place the following code within the <body> element:

<table>
  <caption>Product Comparison</caption>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>$19.99</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>$24.99</td>
      <td>4.2</td>
    </tr>
    <tr>
      <td>Product 3</td>
      <td>$14.99</td>
      <td>4.7</td>
    </tr>
  </tbody>
</table>

<table>: The <table> element creates a table to organize data.
<caption>: The <caption> element provides a title or description for the table.
<thead>: The <thead> element groups the header content of the table.
<tr>: The table row <tr> represents a row of data.
<th>: The table header cell <th> defines a header cell within the table.
<tbody>: The <tbody> element groups the body content of the table.
<td>: The table data cell <td> represents a cell within the table.

Conclusion

Congratulations! You have successfully built your HTML blog, understanding each element and its purpose. By leveraging the power of HTML, you can now create engaging and interactive web pages. Continue to explore and experiment with additional HTML elements to enhance the functionality and design of your blog. Happy coding!

HTML Basics for Beginners

Table of contents