Each complete HTML element has an opening tag (example: <html>) and a closing tag (example: </html>).
Text is placed between these two tags, which the browser reads and follows based on the tag's instructions.
The exceptions to this rule are called "empty elements", and do not have a closing tag. The image tag <img>, for example, does not have a closing tag, but can be closed in the same tag by adding a slash to the end of the tag <img />.
One of the most basic examples of a functional webpage is:
<html>
<head>
<title>My Very First Webpage</title>
</head>
<body>
How do you make milk shake?
Give it a good scare!
</body>
</html>
Several complete elements are used to create a basic webpage, however the most important set of tags are <html> and </html> because these tags tell the browser that everything between them is HTML that should be read and interpreted. All other elements go inside of the <html> and </html> tags.
The head tags
and </head> are important because everything inside of these tags explain things about the document. For example, the <title> and </title> tags enclose the title text that will identify your webpage in the browser window, and often in search engines, etc. We will learn more about the head tags on the next page.The body tags <body> and </body> are essential, as everything between these two tags will show up as the content of your webpage.
It is very important to open and close HTML elements in a specific order, especially when the tags are nested, or placed inside one another. In our example, the body tags are inside of the HTML tags. Since the body tag was the last one opened, it must be the first one closed.
Incorrectly nested tags look like this: <html> <body> </html> </body>
Correctly nested tags look like this: <html> <body> </body> </html>
Whitespace is ignored by the browser, so you can have as many or as few empty lines and spaces/indentations as you want in your HTML file, and the content will be interpreted the same by your browser.