Basic Structure of an HTML Document
An HTML document is divided into two parts: the head and the body. This document contains different tags and every tag is enclosed with start and end tag of the HTML element. For example, the <head> tag is termed as the start tag and </head> is termed as the end tag.
The basic structure of the HTML document is given below:
<!DOCTYPE html>
<html>
<head>
<title>
Title of the web page
</title>
</head>
<body>
Contents of the web page
</body>
</html>
You can notice above that an HTML document formally begins with the <! DOCTYPE html> element. All your HTML code resides between the <html> and </html> tags. The <html> element has two elements inside it: <head> and <body>. The <head> element is used to specify information about the HTML Web page, such as title of the Web page and Meta tags also in this section mention; whereas, actual contents of the Web page are specified inside the <body> element.
Let’s now learn about the element present in the preceding syntax, one by one: click next button:
The <!DOCTYPE html> Element
The The <!DOCTYPE html> Element is the starting element in an HTML document, which specifies the Document Type Definition (DTD) being used by the document. A DTD is a separate file containing formal definition of the markup language’s grammar, such as the supported elements and attributes. The browser checks the code of the document against the rules in the <!DOCTYPE html> declaration. The <!DOCTYPE html> element does not have a closing tag.
In the earlier version of HTML, there are 3 different DTDs: Strict DTD, Transitional DTD, and Frameset DTD. In HTML 5, there is a single doctype, which is used as <!DOCTYPE html>. You need to add this doctype to tell the browser the type of document along with the instructions to the Web page.
The <html> Element
The <html> element in an HTML, document comes after the <!DOCTYPE html> element and specifies the basic structure of an HTML Web page.
Below given lists all the attributes of the <html> element:
|
Attribute |
Description |
|---|---|
|
class |
Represents the class of the element and is used for rendering. |
|
dir |
Gives text direction for the content on a Web page. You can set this attribute to “ltr” for left to right text direction or “rtl” for right to left text direction. |
|
id |
Represents as unique alphanumeric identifier for the element. |
|
lang |
Refers to the base language used for the element. |
|
version |
Refers to the version of the HTML used. This attribute has been marked as deprecated in HTML 5. |
|
xmlns |
Declares a namespace for custom tags in an HTML document. |
|
manifest |
Provides the URL of a document to be cached, to work offline when the network connection is unavailable |
Below given lists all the elements that can be added inside the <html> element:
|
Attribute |
Description |
|---|---|
|
<header> |
Contains Header Information of the document including the company name and logo. |
|
<nav> |
Provides link to other pages or other sections. |
|
<section> |
Displays a section in a document. |
|
<article> |
Represents an area for adding content to a Web page. |
|
<aside> |
Represents an area for adding extra links and other information. |
|
<footer> |
Represents a footer for each section of a page in the website. |
The <head> Element
The <head> element contains general information about the HTML document such as the title, keywords for search engines, and a base address for URLs.
Below given lists all the attributes of the <head> element:
|
Attribute |
Description |
|---|---|
|
classs |
Represents the class of the element and is used for rendering. |
|
dir |
Gives text direction for the content on a Web page. You can set this attribute to ‘ltr’ for left to right text direction or ‘rtl’ for right to left text direction. |
|
id |
Refers to the unique alphanumeric identifier for the element. |
|
lang |
Specifies the base language used for the element. |
|
style |
Specifies the inline style indicating how to render the element. |
|
title |
Holds additional information for the element. |
Elements to be added to the <head> Element
|
Attribute |
Description |
|---|---|
|
<base> |
Refers to the base URL for the document |
|
<basefont> |
Refers to the base font for the document |
|
<bgsound> |
Refers to the background sound used in a Web page |
|
<insindex> |
Refers to the rudimentary input control |
|
<link> |
Indicates a relationship between the document and another object |
|
<meta> |
Specifies the header information |
|
<nextid> |
Specifies the name value to use when creating new hyperlink element |
|
<noscript> |
Holds text that only appears if the browser does not support the <script> element |
|
<script> |
Holds programming script statements. Such as JavaScript |
|
<style> |
Includes style information for rendering |
|
<title> |
Specifies the title of the Web page that appears in the Web browser |
The <title> element
The <title> element contains the title of the HTML document. This element appears in the title bar of the Web browser and is used by search engines for referring to the document. Each <head> element should contain a <title> element. You should try to keep the title text relatively short and to the point because some browsers are not able to handle titles longer than 256 characters. Below lists all the attributes of the <title> element.
Attributes of the <title> Element
|
Attribute |
Description |
|---|---|
|
class |
Represents the class of the element and is used for rendering |
|
id |
Refers a unique alphanumeric identifier for the element, which can be used for referring to it |
|
lang |
Refers to the base language used for the element |
|
style |
Specifies the inline style indicating how to render the element |
The <body> Element
The <body> element contains the body of the HTML document, which includes the entire content that appears in the Web browser. It can include text, images, and multimedia elements.
Below lists all the attributes of the <body element:
|
Attribute |
Description |
|---|---|
|
class |
Represents the class of the element and is used for rendering. |
|
dir |
Gives the direction of directionally neutral text. You can set this attribute to ‘ltr’ for left to right text direction or ‘rtl’ for right to left text direction. |
|
id |
Refers to the unique alphanumeric identifier for the element, which can be used for referring to it. |
|
lang |
Refers to the base language used for the element. |
|
style |
Specifies an inline style for the element. |
|
title |
Holds additional information for the element, such as tooltips. |
After getting familiar with the basic structure of an HTML document. Let’s see how to create and save an HTML document in Next page. Click on Next button