Michael Salam's Blog
7 HTML Elements that Will Appear in Every One of your Websites. Do you Really Understand Them?

7 HTML Elements that Will Appear in Every One of your Websites. Do you Really Understand Them?

Michael Salam's photo
Michael Salam
·

8 min read

Ah, HTML.

Not a fancy programming language (or even a programming language at that), but a crucial part of the web. Unless you've followed some weird roadmap, it is, in my opinion, the first thing you should learn as a web engineer, frontend or backend.

Of the 115+ functional HTML elements, however, there are 7 that will (or at least should) appear in EVERY SINGLE WEBSITE. You see them every time, but do you understand their purpose? Or do you put them there because some chap on the internet said you should?

In this post, we will go through these 7 HTML elements, explaining why exactly they are used the way they are.

1. <!DOCTYPE> declaration

As the heading suggests, <!DOCTYPE> is not necessarily an HTML element, but a declaration, and is the first line of any HTML document.

It simply tells the browser, "Expect an HTML document".

For HTML5 documents, the <!DOCTYPE> declaration looks like this:

<!DOCTYPE html>

Older HTML versions have slightly different <!DOCTYPE> declarations. For example, this is what it looks like with HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Okay, maybe not "slightly" different, but you get the point.

The <!DOCTYPE> declaration is not case-sensitive (uppercase and lowercase letters are not treated differently), which means you can have <!DOCTYPE> declarations that look like

<!doctype>

<!DocType>

<!Doctype>

You get the point ;)

2. <html> element

Following the <!DOCTYPE> declaration, is the <html> element. Let's add that in.

<!DOCTYPE html>
<html lang="en">
    ...
</html>

The <html> element serves as the root element of an HTML document, encapsulating all the content within a web page.

You may have come across or used the :root selector in CSS. This selector targets the <html> element.

Why is there lang="en" in there though? :(

Well, lang is an attribute that specifies the primary language of the content using a code called the two-letter language code or ISO-639-1 code (e.g., "en" for English).

Omitting the lang attribute won't break the page, but it could affect accessibility and SEO efforts.

If you didn't already know,

An HTML attribute is a modifier of an HTML element that provides additional information about the element.

Here are some things you may not have known about the <html> element:

  1. Inline JavaScript and CSS code can be embedded within the <html> element, although best practice is to use <script> and <style> elements within the <head> or <body>.

  2. JavaScript event handlers like onload and onunload can be attached to the <html> element to trigger actions when the page loads or unloads.

  3. Since the <html> element can also be used as the root element for global attributes like data-*, you can create your custom data attributes which are accessible throughout the entire document.

3. <head> element

This element is one of the two elements contained in the <html> element, the other being <body>.

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
</html>

<head> can contain a bunch of stuff, including metadata, links to stylesheets, scripts, and other resources essential for document setup. I guess you can call it the configuration center of the HTML document.

We can't directly see the content inside the <head> element on the web page, but it plays a vital role in shaping how the page is displayed and perceived by both users and search engines.

Specifically <head> contains the following elements: <title>, <style>,<meta>, <link>, <script>, <base>, two of which have made this list. We will talk about them next.

4. <title> element

Look at your browser tab. There's something written on it, isn't there?

This is the first element so far on this list that we can see and point to in our browser. To define the title of a web page, you simply write it in the <title> element.

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
    </head>
</html>

Let's say I create a web page and in the <title> tag, I write "Anime is not cartoon".

<!DOCTYPE html>
<html>
    <head>
        <title>Anime is not cartoon</title>
    </head>
</html>

When you load the webpage in your browser, you will see written on the tab, "Anime is not cartoon".

Browser tab showing title

The <title> element is not for your browser tab only though. Its content is also used as the default name for bookmarked pages.

Bookmarks bar

Search engines use the text within the <title> element to understand the topic and relevance of the page's content.

Finally, but importantly, the content of the <title> is shown in search engine results pages, as highlighted in the image below

Page title in a search result

5. <meta> element

Also contained in the document's <head>, a great variety of information (called metadata) can live in a <meta> element.

Metadata is "data that describes data".

It is used to provide information about the HTML document that is not displayed on the page itself. The document's <head> is a container for metadata, and the <meta> element defines a specific piece of that data through the use of different attributes.

The most common attributes of the <meta> element are name, content, and charset.

Some use cases for the <meta> elements which you will most likely come across are

  1. Character Encoding:

    <meta charset="UTF-8"> is used to declare the character encoding of the document. It ensures proper rendering of text in various languages.

  2. Viewport Settings (for Responsive Design):

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> is crucial for responsive design, ensuring that the page adapts to different screen sizes.

  3. Description (for Search Engines):

    <meta name="description" content="Your page description here"> provides a concise summary of the page's content for search engine results.

  4. Keywords (Less Relevant for SEO):

    <meta name="keywords" content="keyword1, keyword2, ..."> specifies keywords related to the page's content. Note that search engines place less emphasis on this metadata today.

  5. Author Information:

    <meta name="author" content="Author's Name"> indicates the author of the content.

  6. Robots Directive:

    <meta name="robots" content="index, follow"> instructs search engine crawlers on whether to index the page and follow its links.

  7. HTTP-Equiv for HTTP Headers:

    <meta http-equiv="refresh" content="5;url=redirect.html"> can redirect users to another page after a specified time.

  8. Favicon Link:

    <link rel="icon" href="favicon.ico" type="image/x-icon"> isn't a <meta> tag, but I deemed it fit to include it, as it occurs so often. It specifies the icon displayed in browser tabs and bookmarks.

That's quite a bit, I know. Let's add those in:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Your page description here">
    <meta name="keywords" content="keyword1, keyword2, ...">
    <meta name="author" content="Author's Name">
    <meta name="robots" content="index, follow">
    <meta http-equiv="refresh" content="5;url=redirect.html">

    <title>...</title>
  </head>
</html>

6. <link> element

Another element found in the document's <head>, the HTML <link> element is a versatile tag used to establish relationships between an HTML document and external resources, such as stylesheets, icons, and web fonts.

Similar to the <meta> element, we do this by defining various attributes that specify:

  1. The type of resource - type attribute.

  2. Its relationship to the current HTML document - rel attribute.

  3. The sizes of the linked resource (for icons and images) - sizes attribute.

  4. The media type or query for which the linked resource is suitable - media attribute.

  5. The actual link or reference to the resource - href attribute.

At first, I didn't want to include it on the list, on the premise that a <link> doesn't exactly NEED to appear in an HTML document unless you're linking to an external resource, but that almost always happens, now, doesn't it? (^_^,)

The most common use cases for <link> are:

  1. Stylesheets:

    <link rel="stylesheet" href="styles.css" type="text/css"> links an external CSS stylesheet to apply styles to the document.

  2. Icons and Favicons:

    <link rel="icon" href="favicon.ico" type="image/x-icon"> specifies the icon displayed in browser tabs and bookmarks.

  3. Web Fonts:

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css"> links to an external web font.

  4. Alternate Stylesheets:

    <link rel="alternate stylesheet" href="alternate-styles.css" title="Alternate Styles"> allows users to switch between different stylesheets.

  5. Preconnect and Prefetch:

    <link rel="preconnect" href="https://example.com"> preconnects to a domain, improving performance.

    <link rel="prefetch" href="image.jpg" as="image"> prefetches resources for faster loading.

Let's add those in:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta ... >

    <link rel="stylesheet" href="styles.css" type="text/css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
    <link rel="alternate stylesheet" href="alternate-styles.css" title="Alternate Styles">
    <link rel="preconnect" href="https://example.com">
    <link rel="prefetch" href="image.jpg" as="image">

    <title>...</title>
  </head>
</html>

7. <body> element

Last element, finally! (^.^)

This is where we find the <div>s, the <p>s and all the other elements that show up on a web page.

The document <body> is the part of the document that contains the visible content of a web page, which the user sees and interacts with. It is the primary area where text, images, multimedia, and other elements are displayed.

The <body> element can be styled using CSS to control background colors, text colors, fonts, margins, and more.

CSS can also be used to control the layout of the content within the body, such as positioning, alignment, and responsiveness.

Add that in :)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta ... >

    <link rel="stylesheet" href="styles.css" type="text/css">
    <link ...>

    <title>...</title>
  </head>

  <!-- ADD THE <body> -->
  <body>
    ...
  </body>
</html>

And there we have a (somewhat) complete HTML file template, as well as knowledge of the 7 HTML elements that are present on EVERY web page:

  1. <!DOCTYPE>

  2. <html>

  3. <head>

  4. <title>

  5. <meta>

  6. <link>

  7. <body>

Parting words

If you've made it to the end, give yourself a pat on the back. Maybe prepare for yourself some groceries, with sweetener and floating berries (my Nigerian compatriots will understand).

The goal of this article was to give you a deeper understanding than you already have about the essential HTML elements. Let me know if that goal has been met, in the comments.

Have a good one!

Web DevelopmentHTMLHTML5Web DesignFrontend Development