1. Getting to know the HTML document
Let's figure out how HTML documents work. How does any HTML document start? Every HTML document has a structure consisting of three nested tags: html, head, and body. That's the standard. Here's an example:
<!DOCTYPE html>
<html>
<head>
Service tags
</head>
<body>
Main document
</body>
</html>
Everything the browser displays is inside the paired body tag (the document body). Inside the head tag are tags with service/auxiliary information for the browser.
Also, it is customary (but not mandatory) to write the document type—DOCTYPE—at the beginning of the document, so the browser can better understand how to handle errors. Many browsers are able to correctly render documents with broken layouts.
2. Example of an HTML document
An HTML document is the foundation of any web page. It tells the browser how the page should look. Here's a simple example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>
Main parts of an HTML document
This line is called the document type declaration (doctype). It lets the browser know that the document is written in HTML5, the latest version of HTML. This is important for the correct rendering of the page.
<html>
The <html> tag opens an HTML document. All the content of the web page must be inside this tag. It marks the beginning and end of the HTML document.
<head>
The <head> tag contains service information about the page. This info isn't displayed directly on the web page but is important for browsers and search engines.
The <title> tag sets the page title, which appears on the browser tab. This is the first thing the user sees when opening the page.
<body>
The <body> tag contains all the visible content of the web page: text, images, links, tables, and so on. Everything the user sees on the screen is inside this tag.
<h1>Hello, world!</h1>
The <h1> tag is a first-level heading. It's used for the most important headings on the page. The text inside this tag is displayed in a large, bold font.
<p>This is my first web page</p>
The <p> tag represents a paragraph of text. It's used to separate text into logical blocks. The text inside this tag is displayed as a normal paragraph.
GO TO FULL VERSION