Back Next

HTML Basic Page Structure

HTML general structure: <tagname>Content goes here...</tagname>
Save file with extension .html or .htm and open in the browser to view the HTML output.
The HTML file has head and body parts. The body section contains the information to display in the web browser.

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Doctype: You should use the HTML5 doctype. It is short and backwards compatible.
Document character set: Use UTF-8 character set. you should always specify the character set as the first line within your HTML's <head> block.
Viewport meta tag: This creates a better chance of working for the application on mobile devices.

Building Blocks of HTML

An HTML document consist of its basic building blocks which are:

Tags: An HTML tag surrounds the content and applies meaning to it. It is written between ‘<’ and ‘>’ brackets.
- Some HTML elements have an opening tag only and no end tag. These elements are called empty elements.
  Eg: <br>, <hr>, <link>, <img>
- Container tags consist of both opening and end tags. Eg: <html>, <div>, <p>, <span>
Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.
Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags are termed as HTML elements.

Important Tags in an HTML Page Structure

Tag	Description
<html>	Root of an HTML document. It acts as a container for all other HTML elements.
<head>	<head> tag in HTML contains information related to the document (machine-readable information such as title, scripts and style sheets).
<title>	Title tag determines how to display titles in search engines. The title tag is displayed at the top of the web browser which helps to recognize the web page uniquely.
<meta>	It represents metadata. Meta tags are snippets of text that describe a page’s content and do not appear on the page. It is also a search engine related tag.
<link>	The HTML <link> tag is used for defining a link to an external document, usually a stylesheet. It is placed in the <head> section of the document.
<script>	The <script> element is used to embed executable code; this is used to embed or refer to JavaScript code.
<body>	The HTML <body> tag defines the main content of the HTML document. It must be the second element inside of the parent <html> element, after the <head> element.

HTML Nesting

HTML elements contained within other HTML elements is called nesting. Nesting allows us to apply multiple HTML tags to a single block of content.

HTML Comments

HTML Comments are used to add notes through the code. Comments will never be rendered on the screen. To add a comment in our HTML, start the comment with .
Eg: