Search for a command to run...
I am a Sr. Frontend Engineer, Team Lead, with 10+ years of experience. I have experience building scalable, accessible, and responsive web applications. I enjoy writing about frontend development and hope to help you on your dev journey.
No comments yet. Be the first to comment.
In this series we will cover the basics of HTML. I will explain the structure of a document, what the head is and does, and what the body tag is and does.
When starting to learn HTML you will hear the term semantic markup. What does this mean and why is it important? Let's break it down and take a look at some examples. What is semantic HTML? Why is this important? Examples of semantic elements Conclu...
In this week's article, I want to jump right into building a simple navbar using HTML and CSS. Let's take a look at the design we will be building and review the requirements. Table of contents: What we are building Requirements Implementation Concl...
When starting to learn HTML you will hear the term semantic markup. What does this mean and why is it important? Let's break it down and take a look at some examples. What is semantic HTML? Why is this important? Examples of semantic elements Conclu...
In last week's blog post Basic HTML structure explained I covered the basics of HTML structure. In this article let's go more in-depth on the purpose of the head tag. Table of contents What is the head tag? Title Tag Meta Tag Link Tag Style Tag Scri...
HTML is one of the first building blocks to learn how to build websites. There are a set of rules that must be followed in order to build HTML documents. Let's break down the basic structure of an HTML document to help us start building websites. Tab...
In this article, we are going to continue our Basic HTML series. Over the last couple of weeks, I have discussed basic HTML structure (Basic HTML Structure Explained) and explained what the head tag is (HTML Head Tag Explained). This week let's take a look at what the body tag is and some common elements you will see contained inside the body tag.
Table of contents
The body tag is a container element that holds the contents of the site. Anything you potentially want visible to the user will go inside the body tag.
For example, if I want to display "Hello World" I would do the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Rocco Sangellino" />
<meta name="description" content="Basic html body tag explained" />
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
<title>What is the body tag</title>
</head>
<body>
Hello World!
</body>
</html>
With that basic example, you created a web page! Since the body tag is a container that holds the contents of the site we can now expand on this and start to add other elements inside such as headers, navigation, sections, paragraphs, tables, forms, etc. Let's take a look at some common elements.
HTML provides us with many elements that we can use to structure our site. Below are some common elements you will encounter when building a website:
div - The div tag stands for "division". In other words, it's a generic container that holds other elements or text. It can be used to "divide" your sites into different sections.
<div>
I am a container that can hold other HTML elements.
</div>
Rendered HTML:
spanThe span tag is similar to a div, in that it's a container. The difference being a div is a block-level element and the span is an inline element.
<span>I am mostly used to markup text or other inline elements like icons.</span>
Rendered HTML:
h1-h6 The h1-h6 tag defines the heading layout of the site. Generally, you will have one h1 and each subsequent heading should be nested according. As we will be learning in future articles this is important for semantic markup and screen readers.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Rendered HTML:
section - The section tag is the same as a div in that it is a block-level container that defines a section of the site. The difference is a section has semantic meaning where a div does not.
<section>
<h2>About Me</h2>
<p>Hello! My name is Rocco. Thank you for reading my blog.</p>
</section>
Rendered HTML:
p - The p tag is used for paragraphs.
<p>I would put my bio in a paragraph tag.</p>
Rendered HTML:
table - The table tag is used for tabular data. The table tag will contain other elements to fill out a complete table. Such as: thead, tbody, tr, th, and td
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<body>
<tr>
<td>Rocco Sangellino</td>
<td>example@gmail.com</td>
<td>111-111-1111</td>
</tr>
</tbody>
</table>
Rendered HTML:
a - the a tag stand for "anchor" or hyperlink. In order words, it enables you to link to other websites on the internet.
<a href="https://blog.roccosangellino.com">Rocco's Blog</a>
Rendered HTML:
ul - The ul stand for an unordered list. This allows you to add a bulleted list to your site.
<ul>
<li>
<a href="http://twitter.com">Rocco's Twitter</a>
</li>
<li>
<a href="https://blog.roccosangellino.com">Rocco's Blog</a>
</li>
</ul>
Rendered HTML:
w3schools has a comprehensive list of HTML tags with examples. I encourage you to take a look.
In this article, we learned that the body tag is a container element that holds the contents of a website. Anything you want visible to the user will go inside the body tag. With this basic understanding, you can start to create web pages. However, we have just scratched the surface of building sites. Let's pick up in the next article discussing what semantic markup is and why it's important.
If you haven't already please follow me on Twitter (@RoccoSangllino) where I share more information on web development.