
The basic structure of an HTML document contains 5 elements:
- <!DOCTYPE>
- <html>
- <head>
- <title>
- <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:
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 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”.
<title> (required!)
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 heading.
This is a paragraph.
Enjoy coding!