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
What is the body tag?
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.
Common HTML 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- Thedivtag 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:
-
spanThespantag is similar to adiv, in that it's a container. The difference being adivis a block-level element and thespanis an inline element.
<span>I am mostly used to markup text or other inline elements like icons.</span>Rendered HTML:
-
h1-h6Theh1-h6tag defines the heading layout of the site. Generally, you will have oneh1and 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- Thesectiontag is the same as adivin that it is a block-level container that defines a section of the site. The difference is asectionhas semantic meaning where adivdoes not.
<section> <h2>About Me</h2> <p>Hello! My name is Rocco. Thank you for reading my blog.</p> </section>Rendered HTML:
-
p- Theptag is used for paragraphs.
<p>I would put my bio in a paragraph tag.</p>Rendered HTML:
-
table- Thetabletag is used for tabular data. The table tag will contain other elements to fill out a complete table. Such as:thead,tbody,tr,th, andtd
<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- theatag 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- Theulstand 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.
Conclusion
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.
Top comments (0)