HTML Document Structure

HTML documents include a document type declaration and the <html> root element. Nested in the <html> element are the document head and document body. While the head of the document isn't visible to the sighted visitor, it is vital to make your site function. It contains all the meta information, including information for search engines and social media results, icons for the browser tab and mobile home screen shortcut, and the behavior and presentation of your content. In this section, you'll discover the components that, while not visible, are present on almost every web page.

`<!DOCTYPE html>`

The <!DOCTYPE html> declaration is the first line of an HTML document. It specifies the document type and version, indicating that the document is written in HTML5.

<!doctype html>
<html>
  <head>
    <!-- Head content -->
  </head>
  <body>
    <!-- Body content -->
  </body>
</html>

`<html>`

The <html> element is the root element of an HTML document. It encapsulates all the content of the document.

<html>
  <head>
    <!-- Head content -->
  </head>
  <body>
    <!-- Body content -->
  </body>
</html>

Content Language

The lang attribute inside the <html> tag specifies the language of the content in the document. It helps search engines and screen readers understand the language used.

<html lang="en"></html>

`<head>`

The <head> element contains meta-information about the document, such as character encoding, document title, and viewport settings.

<head>
  <meta charset="UTF-8" />
  <title>Document Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Other head content -->
</head>

Character Encoding

The character encoding is specified using the <meta charset="UTF-8"> tag within the <head> section. It defines the character set used in the document.

<meta charset="UTF-8" />

Document Title

The document title is set within the <title> tag inside the <head> section. It appears in the browser's title bar or tab.

<title>Document Title</title>

Viewport Metadata

Viewport metadata is specified using the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag within the <head> section. It ensures proper scaling and layout on different devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Other `<head>` Content

The <head> section can contain additional elements such as <link> for stylesheets, <script> for JavaScript, and other meta tags for various purposes.

<head>
  <!-- Other head content -->
</head>

CSS

CSS is linked to the HTML document using the <link> tag within the <head> section. It defines the styling of the document.

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

Other Uses of the `<link>` Element

The <link> element can also be used to specify other resources like favicons or alternate stylesheets.

<link rel="icon" href="favicon.ico" />

Scripts

Scripts are included within <script> tags, either in the <head> or <body> section. They add interactivity and functionality to the document.

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

Base

The <base> tag specifies the base URL for all relative URLs within the document. It is included within the <head> section.

<base href="https://example.com/" />

HTML Comments

HTML comments are enclosed within  and can be placed anywhere in the document. They are not rendered by the browser and are used for adding notes or annotations to the code.

<!-- This is a comment -->

1. HTML5 Features 3. Forms