HTML stands for Hyper Text Markup Language. This language is used to create web pages and is responsible for its structure. HTML is made up of elements, each of which tells the browser how to display content.
Every HTML document is unique, but there are certain elements that will be present 100% of the time:
- <!DOCTYPE html> declaration
- <html> element
- <head> element
- <title> element
- <body> element
A simple HTML document with no content looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
</body>
</html>
Each document must begin with a <!DOCTYPE> declaration. It is important to remember that the <!DOCTYPE> declaration ALWAYS comes first in the document before all other elements. This element is not an HTML tag. It is an important element for the browser, telling it what kind of document to expect.
The declaration code is as follows:
<!DOCTYPE html>
The <html> element represents the root of the document and the container for the rest of the elements. An <html> element consists of an opening tag <html> and a closing tag </html>. The language attribute should also be included in opening tag, this will be the language declaration for the web page.
The code for <html> element with the language attribute is as follows:
<html lang="en">
<--other elements-->
</html>
The <head> element is a container for metadata that fits between the <html> element and the <body> element. This metadata is data about the document and is not displayed on the page. Like the <html> element, the <head> element has an opening and closing tag. Typically, the <head> element defines things like title, character set, styles, scripts, and other things for the document. The following elements are most commonly used:
- <meta>
- <title>
- <link>
The code for the <head> element with metadata is as follows:
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="./styles.css" />
</head>
The <body> element defines the body of the document. The <body> element contains all the content of an HTML document, such as headings, paragraphs, images, hyperlinks, lists, and so on.
The code for a <body> element with simple content is as follows:
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>