In the first article of this series, we looked at the first element of the <html> element, the HTML head tag. In this article, we will explain what the HTML body tag is and what it is used for.
What is the HTML Body Tag?
The HTML body element is the container for the content of an HTML document. It must be the second element of the <html> element and follows the head element. Each HTML document can only contain one body element.
What is the HTML Body Tag Used For?
The content of an HTML document can take various forms. All web pages contain text. Most web pages also contain images. Some web pages also contain video & audio. In this article, we’ll look at how text can be used in a web page.
Text
On the most basic level, text can be used as a heading or a paragraph. Headings are used to give structure to the content. There are six headings from <h1> to <h6>. <h1> is used as the main heading. Each page should only contain one <h1>. <h2> is used as a subheading, and <h3> to <h6> are used as sub-subheadings. It is possible to have multiple sub- and sub-subheadings. This article uses two <h2> headings, each followed by a paragraph, and multiple <h3> headings, also each followed by a paragraph. Always use the next heading in the hierarchy, and don’t “jump over” one type of heading. This will look strange on the rendered page. But more importantly, it will confuse readers who rely on screen readers to access the content of your page. They will think they missed some content.
In some cases, it is recommended to use the <article> tag to combine headings and paragraphs into a unit of independent and self-contained content. Examples are news stories or posts in a forum or blog articles.
<article>
<h2>Microsoft retires Internet Explorer</h2>
<p>On June 15, 2022, Internet Explorer was officially retired and is out of support. Users will be progressively redirected to Microsoft's new browser, Microsoft Edge. At a future date, Internet Explorer will be permanently disabled.</p>
</article>Lists
Another option to give structure to content is to use lists. There are three forms of lists in HTML: unordered lists, ordered lists, and nested lists.
Unordered lists
In an unordered list, the order of items in the list doesn’t matter. A good example is a shopping list:
<ul> <!-- the unordered list is wrapped inside the ul tag -->
<li>Peanut butter</li> <!-- each item is wrapped inside the li tag -->
<li>Coconut oil</li>
<li>Eggs</li>
</ul>Ordered lists
Ordered lists are used when the order of items matters, e.g. in recipes or any form of instructions.
<ol> <!-- the ordered list uses the ol tag -->
<li>Add 15g fine grind coffee to your Aeropress</li> <!-- same as unordered lists -->
<li>Add 60 - 70 g room temperature water</li>
<li>Stirr for 1 minute</li>
<li>Press for 1 minute</li>
<li>Dilute with ice water for your own taste</li>
</ol>Ordered lists use numbers by default and start at 1. If you want to start the list at another number, you can add the start attribute with the desired number to the ol tag:
<ol start="5">To change the number of an individual item in a list, add the value attribute to that item. The number of all items below this item will be recalculated.
<ol>
<li>Head north on Main St</li><!-- Output: 1. Head north on Long Island St -->
<li>Turn left after 200m</li><!-- Output: 2. Turn left after 200m -->
<li value="6">Turn right after 500m</li><!-- Output: 6. Turn right after 500m -->
<li>The school is to your right</li><!-- Output: 7. The school is to your right -->
</ol>If, for some reason, you want to display an ordered list in reverse order, you add the Boolean attribute reversed to the ol tag. Its default value is False, so you only have to add it if you want to reverse the list.
<ol reversed>Nested lists
It is possible to place one list inside another. In most cases, an unordered list will be placed inside an ordered list:
<ol>
<li>Get up</li>
<li>Shower and dress</li>
<li>Go to the grocery to buy:</li>
<ul> <!-- start of nested list -->
<li>Coffee beans</li>
<li>Eggs</li>
</ul> <!-- don’t forget to close the nested list! -->
<li>Return home</li>
<li>Make breakfast</li>
</ol>Links
One of the most defining attributes of an HTML document is being able to easily link to other HTML documents. For this, we use the <a> tag in combination with the href attribute to define the link’s destination. Without further attributes, the linked page will be opened in the current browser window. To improve the user experience, the linked page should be opened in a new browser tab by using the target attribute with the value _blank. To prevent the linked page from ‘knowing’ from which page the user came, the rel attribute with the value noreferrer can be used. To display a user friendly name instead of the complete and often long URL, put the name to be displayed between the opening and closing a tag:
<a href="http://www.en.wikipedia.org" <!-- link destination --> target="blank" <!-- open link in new tab --> rel="noreferrer"> <!-- make the referrer unknown -->Wikipedia <!-- name displayed instead of URL --></a>Tables
Tables are the best choice for displaying tabular data, i.e. data contained within rows and columns. To create a table that is easy to read and understand, several elements are needed. The complete table is placed inside the <table> tag. To inform the users about the purpose of the table, a title should be added. The title is placed inside the <caption> tag, which must be the first element after the opening <table> tag. On the rendered page, the title will be placed at the top of the table.
Mimicking the structure of an HTML document, a table head element, <thead>, a table toby element, <tbody>, and a table foot, <tfoot>, can be used to add further structure to the table and further improve accessibility.
The basic structure without any rows or content looks like this:
<table>
<caption>Favourite movies</caption>
<thead>
<!-- table head content -->
</thead>
<tbody>
<!-- table body content -->
</tbody>
<tfoot>
<!-- table foot content -->
</tfoot>
</table>Table head
The table head contains the heading row or rows, and is placed after the caption element and before the table body element. All rows in a table are placed inside a <tr> tag. In the table head, the child elements are then placed inside a <th> tag, so that their content is rendered as a heading. Inside the <th> tag, the scope attribute should be used to help screen readers identify which data in the table belong to the heading. Most often, the value for the scope attribute will be “col”, i.e. the heading refers to all data directly beneath it.
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Genre</th>
<th scope="col">Year</th>
<th scope="col">Director</th>
<th scope="col">Price for Blu-ray</th>
</tr>
</thead>Table body
The table body contains the table’s primary data. In our example, each row contains the data about one movie. Since we have defined four headings, each row must contain four cells. In all rows, except for the headings, the data for these cells is placed inside a <td> tag. It is possible to define headers for each row. This makes screen readers read out the entire row at once, and further improves accessibility.
<tbody>
<tr>
<td scope="row">Gattaca</td>
<td>Drama</td>
<td>1997</td>
<td>Andrew Niccol</td> <td>15,37€</td>
</tr>
<tr>
<td scope="row">Call me by your name</td>
<td>Drama</td>
<td>2017</td>
<td>Luca Guadagnino</td> <td>5,99€</td>
</tr>
<tr>
<td scope="row">The Usual Suspects</td>
<td>Crime</td>
<td>1995</td>
<td>Bryan Singer</td> <td>11,46€</td>
</tr>
</tbody>Table foot
The table foot contains footer content. It can either be placed beneath the table head or beneath the table body. It is placed inside a <tfoot> tag.
<tfoot>
<tr>
<td scope="row">Price</td>
<td></td> <!-- add empty cells to move content to the right -->
<td></td>
<td>21,36€</td>
</tr>
</tfoot>Forms
Forms are used to collect and submit user input. A very simple example is a form where users enter their email address into an input field and submit that data to receive newsletters or enter a giveaway. More complex forms, e.g. an application form, gather different types of data: name and address, email, date of birth, passwords, attached files, and many more.
Let’s build a very simple form. The form is placed inside a form tag. The action attribute defines where the data will be sent. The method attribute specifies how the data will be sent.
“GET” appends the form-data into the URL and allows the user to bookmark the result. Examples are search queries. It should never be used for sensitive data, because all submitted data will beá visible in the URL!
“POST” appends the form-data inside the body of the HTTP request. The data is not shown in the URL, and the submission can’t be bookmarked.
<form action="https://formdump.test.com" method="POST"> <!-- labels and inputs from the below examples here --></form>Every form of data we can collect has an input type, e.g. text, number, password, or email. Let’s ask our user to give us their email address. We’ll also give the field a name and an id, which both take the same value. To show the user an example of the expected input, we use the placeholder attribute. By setting the required attribute, the form can’t be submitted without a value in the field:
<input
type="email" id="email" name="email" placeholder="you@mail.com" required>In addition to (or instead of) the placeholder attribute, we can also add labels to make it even clearer what the field is for. The for attribute must use the value from the id attribute! If you want to display the label first and then the input field, add the label element before the input element.
<label for="email">Enter your email:</label>All that is needed now to complete this form is a submit button:
<input type="submit" value="Send!">With this basic structure, you can build complex forms with multiple input types and attributes to customise it to your needs. Good sources to learn more about input types and attributes are w3schools.com and MDN Web Docs.
Learn basic HTML for free
If you want to learn some basic HTML for free, try our 5 Day Coding Challenge. After just one hour a day over five days, you will learn the basics of HTML, CSS and JavaScript. You will have built your first ever web page by the end of this short free course.
Try our Free 5 Day Coding Challenge 
Take our full stack course 
