Just as you would organize the contents of a drawer into files and folders, a webpage is like that collection of your files and HTML acts as the organizer. There are specific tags that are used for organization purposes in HTML, namely <header>, <footer>, <main>, <section>, <article>, and <aside>. These are all used inside the <body>. There are a few others that are more commonly used in the <head> of the HTML page. Note that the <head> tag is different from the <header>. All HTML pages have a <head>, just like all people have a head. The <head> tag is required while the <header> is optional. A high level discussion with code examples about proper HTML tags in both the head and the body follows.
Tags in the Head
The main purpose of adding tags inside the <head> of your HTML page is to provide the right information to search engines about your page. While the <title> tag is unique in that it can be seen in a web browser tab by a user, all other tags inside the <head> of your HTML page are invisible and can only be read by developers and search engines.
The <title> tag
The title tag is the only tag that can be seen by users, and as a result should be chosen carefully. Users will read this title tag when they are away from your page inside their tab, so the first few characters have to be able to immediately and easily identify your site and differentiate it from others that your visitor may be browsing. The same goes for search engines. In order to maximize Search Engine Optimization (SEO) and discovery, it helps to have the first few characters in your title relate to the keywords that you wish to be discovered by. The below code sample is from the introductory article to HTML but is worth repeating here because it shows the most basic structure of a web page with a title:
<!DOCTYPE html>
<html>
<head>
<title>Browser tab name</title>
</head>
<body></body>
</html>Metadata tags inside the Head
The next category of tags that can be added inside the <head> are metadata tags, identified by <meta />. Unlike the title tag, which you can only have one of, you can add several meta tags inside your head. They are not readable by your visitors but can make a significant difference in helping search engines like Google identify and relate your page to relevant content and topics. They can also be used to customize how your page looks when it’s shared on social media like Instagram, Facebook, and Twitter. In programming, metadata is information that describes data. In this case, we are adding additional information about the data or content in our page through the <meta /> tags. Here’s what they look like in practice.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta name="description" content="The description meta tag is often used for including text that shows up in search engine results. After the title tag, it can be considered the second-most important tag." />
</head>
<body></body>
</html>Styles and Scripts
When you want to improve the design and look of your HTML page, you need to add or customize its CSS. While HTML is predominantly for structuring and organizing your page, CSS is necessary for making it look pretty. Although you can add CSS code inside a <style> tag, it often ends up looking messy because you end up combining the content with the design. In general, with web development, it’s better to have more files that are isolated to specific functions on the page rather than jamming all of your code into one file. To avoid jamming all of your CSS code inside of the <style> tag, you can add a <link /> tag inside the head of your HTML pointing to a stylesheet that you wish to load when the page first loads. This can also be used to refer to external stylesheets hosted elsewhere on the web. Many web pages end up loading both local and external stylesheets inside the <head> using a few <link /> tags. <link /> tags are not to be confused with hyperlinks represented by the <a> tag. Here is an example of what they would look like in practice:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<!-- Example of a link pointing to the style sheet of a CSS framework called Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body></body>
</html>For more details on tags that go in the <head> element watch the below video:
Tags in the Body
While older web pages often just used <div> tags to accomplish the goal of the following tags, with HTML5 these tags are emphasized more heavily for better structuring your page. It’s highly recommended to use these new organizer tags for demonstrating to search engines the various levels of importance of your content. Inside the body, the three top-level organizer tags you can use are <header>, <main>, and <footer>. These three tags are usually direct children of the body, meaning the body tag directly wraps all of them, like so:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>The code snippet shown above is a very common and highly recommended way to organize the body of your HTML page. Let’s go over the kinds of tags that are inside the body and what kinds of content can be nested inside of them.
The <header> tag
As mentioned earlier, the header tag is significantly different from the <head> tag. While the head tag is loaded first before even the page loads in your browser, the header tag must be nested inside the body and is often used for structural information about your web page like commonly visited links, navigation, among other things. Often, the <header> and <footer> tags are used to show links to the most relevant pages on your website. The template and layout of the elements inside the header and footer tags are often repeated across these pages.
Inside the header tag you often find the navigation menu, often called the navbar. In HTML5, you can indicate where your navigation links are listed by enclosing them with the <nav> tag. In their simplest form, these navigation links are a list of <a> tags pointing to other pages on your website. One can modify the code block above to include a simple (if a bit plain) navbar.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/login">Login</a>
</nav>
</header>
<main></main>
<footer></footer>
</body>
</html>We added two non-breaking space tags with the special character. This is because by default HTML will collapse multiple whitespaces into a single space. It will also trim whitespace from the edges of most tags. So, it’s necessary to use the non-breaking space character to provide more spacing between adjacent link tags for improved readability. If you open an HTML file with the above code in a web browser, you will see something to the effect of the following (note that only one of these links, Home, leads to an actual page that exists on the NowIsPow site).
Examples of other elements you can include in the header tag include a brand logo that also leads you back to the home page or a hamburger menu for mobile devices to expand. With the header tag, it’s better to stick to convention at first until you figure out what your visitors are really looking for from your website. Then you can make minor modifications to make it easier to find these most popular pages. Where you can really get creative is the <main> tag.
The <main> tag as a wrapper for your content
The <main> tag is a container for your unique content. Everything from the colors and buttons down to the slightest micro-interaction on your page. These are expressed inside your main tag. This makes the main tag the largest outermost container in your website body. By comparison, the header tag only has navigation menus and the footer tag has more detailed links and copyright information. So put all of your body content inside the main tag. The <p> tags for text, <button> tags for interaction, and even the hyperlink (<a>) tags hrefrencing other URLs.
Elements inside an HTML footer
Sometimes, you may not need a <footer> tag, but usually you do. For a project such as a website, the <footer> tag can be used for links to other pages of interest, a search bar for finding the right content on your website, and also copyright information to protect your intellectual property. For a larger, more interactive project like a web or mobile application, the <footer> tag can load the <script /> tags referencing JavaScript files and other resources the application needs to load from a remote location (for example, a Map View loaded from Google). These serve as references or citations included at the <footer> of your website to help enhance it. The world of Web Development is vast and full of challenges. Like in any science, a developer stands on the shoulders of giants. Interface developers have the additional challenge of adding beauty to their work so that it can have the faintest chance of success in this endless landscape that is The Internet.
For a video overview of organizing the body, see below: