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
Table of contents
What is the body tag?
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:
<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:
divtag 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>
spantag is similar to a
div, in that it's a container. The difference being a
divis a block-level element and the
spanis an inline element.
<span>I am mostly used to markup text or other inline elements like icons.</span>
h1-h6tag defines the heading layout of the site. Generally, you will have one
h1and 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>
sectiontag is the same as a
divin that it is a block-level container that defines a section of the site. The difference is a
sectionhas semantic meaning where a
<section> <h2>About Me</h2> <p>Hello! My name is Rocco. Thank you for reading my blog.</p> </section>
ptag is used for paragraphs.
<p>I would put my bio in a paragraph tag.</p>
tabletag is used for tabular data. The table tag will contain other elements to fill out a complete table. Such as:
<table> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <body> <tr> <td>Rocco Sangellino</td> <td>email@example.com</td> <td>111-111-1111</td> </tr> </tbody> </table>
atag 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>
ulstand 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>
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.