Dofactory.com
Dofactory.com

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.


Example

#

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">

 <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">
  
  <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>

 </head>

 <body>

   <!-- Page content goes here -->

 </body>

</html>

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




Guides