HTML Page Tag Group

The Page Tag Group is a group of tags that are used to define the structure of a web page.

Page tags include <html>, <head>, <body>, <link>, <meta> and others.

Page Structure

All web pages require a well-defined page structure with a handful of foundational tags.

This structure allows browsers to correctly process and render the pages.



An example of the common structure of a web page and its tags.
Most, if not all, web pages follow the same structure.

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


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page title goes here</title>
  <meta name="keywords" content="Page keywords goes here">
  <meta name="description" content="Page description goes here">

  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css" />
  <link rel="stylesheet" href="/lib/bootstrap-datepicker/css/bootstrap-datepicker.css" />
  <link rel="stylesheet" href="/tutorial/style.css" />

  <script src="/tutorial/script.js"></script>



   <!-- Page content goes here -->



Code explanation

  • The <!DOCTYPE> tag defines the HTML version of the page.
  • The <html> tag is a container for the entire page.
  • The <head> tag defines a page header with page-level metadata specifications.
  • The <meta>, <title>, <link>, and <script> tags define page-level metadata items.
  • The <body> tag is a content container with tags like img, table, input, article, and more.

Note: The page-level tags are the foundation of the page hierarchy. The root tag is <html> which has 2 children: <head> and <body>. These, in turn, are containers for other child tags, etc. The nesting of tags inside the <body> is often many levels deep.

Page Tags

Here is a list of page tags that are used to define the structure of a web page.

Element Description
<!DOCTYPE> Must appear on the first line of a page. Specifies the HTML version
<html> Defines the root container for an HTML document
<head> Creates a head container that holds page-level metadata elements
<meta> Provides metadata about a web page
<link> Defines a link to an external source, such as a style sheet
<base> Sets the base URL for all relative URLs on a page
<script> Adds JavaScript to a page. Either client- or server-side
<style> Adds CSS style elements to a page
<title> Specifies the page title that displays in the browser's tab
<body> Specifies a container for the content of the page, with text, links, images, etc.

Did you know?

Did you know?

HTML Tag Statistics

A recent study analyzed 7 million web pages to determine HTML tag usage.

The chart below confirms that the page-level tags are at the top with close to 100% usage.

The reason is that every page must follow the standard HTML page structure.

HTML tag statistics

You may also like

 Back to Tag Groups

Last updated on Sep 30, 2023