What is the basic structure of an HTML document?
- The HTML version information
- The <html> element
- The <head> element
- The <body> element
These parts exist in a hierarchy. The <html> <head> and <body> elements, and each of these wraps other elements in them. A basic flowchart outlining this hierarchy is shown below:
Syntax
Let's look at these parts in greater detail. The image below shows us a basic template of an HTML document.
The HTML version information
The DOCTYPE declaration is a single line that identifies the version of HTML used by the webpage. It must be specified at the beginning of every document. HTML5 requires the declaration to be made in the following manner:
<!DOCTYPE html>
The <html> element
The <html> element immediately follows the document type declaration and contains the remaining elements. It consists of a starting and ending tag.
<html> </html>
The <head> element
The <head> element contains information about the document, such as its title and metadata. It may also load external resources, such as links and scripts. Elements inside the <head> element are typically not directly visible on the webpage.
An important section inside the <head> element is the <title> tag. It contains the text that is displayed in the web browser's title bar.
<head>
<title> Page Title </title>
</head>
The <body> element
The <body> element describes the content and structure of the webpage. It may include things such as text, images, and links.
Popular tags used inside the <body> include the following:
<div>and<span>: These tags help to structure the document.<h1>to<h6>: These tags define the headings of each section in the document. The numbers from one to six represent the size (and hence, significance) of each heading, with<h1>being the largest and<h6>being the smallest.<p>: The paragraph tag can be used to write a relatively long piece of text.<img>: This tag displays an image on the HTML page.<a>: The anchor tag is used to link to other pages and applications by creating hyperlinks.
<body>
<h1> Content Heading </h1>
<p> Content </p>
</body>
Putting it all together
Let's make a basic HTML document using what we've learned so far. Click the "Run" button to view the resulting page in the "Output" tab.
Note: The code above does not display the
<title>element since it is an embedded widget. You should be able to see it in an independent HTML document opened in a web browser.
Free Resources
