Categories
Web development

The basic structure of an HTML document: doctype declaration, html tag, head tag, and body tag

The basic structure of an HTML document

The basic structure of an HTML document contains 5 elements:

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <title>
  5. <body>

HTML <!DOCTYPE>

Every HTML document must start with a <!DOCTYPE> declaration. The <!DOCTYPE> declaration is not an HTML tag. It is “information” to the browser about what document type to expect.

In HTML5, use the declaration:

 <!DOCTYPE html>

Example:

<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>

<body>
This is the content of the document.
</body>

</html>

Output:

This is a title
This is the content of the document.

HTML <html> tag

The HTML <html> element expresses the root of an HTML document.

The HTML <html> element is the container for all other HTML elements.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>This is a title</title>
</head>
<body>

<h4>This is a heading.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output:

Tip: Include the lang attribute inside the element, to declare the language of the website (this is meant to assist search engines and browsers.):

This is a title

This is a heading.

This is a paragraph.


HTML <head> tag

The HTML <head> tag is a container for metadata (information about data) and is placed between the <html> tag and the <body> tag.

The metadata typically specifies the document title, character set, styles, scripts, and other meta information.

Inside the HTML <head> tag can be the following tags:

<base>

<!DOCTYPE html>
<html>
<head>
  <base href="https://lenadesign.org/" target="_blank">
</head>
<body>

<h4>The HTML base element.</h4>

<p><a href="https://lenadesign.org/">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body>
</html>

Output:

The HTML base element.

HTML base tag – Notice that the link opens in a new window, even if it has no target=”_blank” attribute. This is because the target attribute of the base element is set to “_blank”.


<link>

<meta>

<noscript>

<title> (required!)

<script>

<style>

HTML <body> tag

The HTML <body> element specifies the document’s body.

The HTML <body> tag may contain all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, etc.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>This is a title</title>
</head>

<body>
  <h4>This is a heading.</h4>
  <p>This is a paragraph.</p>
</body>

</html>

Output:

This is a title

This is a heading.

This is a paragraph.


Enjoy coding!