A Simple HTML Document

As a general rule, an HTML document consists of a doctype declaration which is a self-closing tag. After that, and html tag comes within which head and body tags are then declared. html tag is the parent tag of the web page while head and body tags are considered direct children tags of html tag.

blog
by Jibran Advani
Published on:
3 August 2021Last updated:
3 August 2021

Before starting, let's have a look at the below the example which is a valid HTML document. If one saves this document, using a text editor with .html file extension and open the same in the browser, the it would show heading with the text of "This is the heading" and a paragraph with the text of "This is the paragraph". Moreover, the tab content will also show the text of "My Site".

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Site</title>
5  </head>
6  <body>
7    <h1>This is the heading</h1>
8    <p>This is the paragraph.</p>
9  </body>
10</html>
11

Breaking the example into simple pieces

In order to understand the examples presented above, let's look at the example line by line.

"!DOCTYPE" html

The !DOCTYPE html declaration simple specifies and tells the browser that this document is written using HTML 5. HTML, since its first release in 1993, has some other versions as well but the HTML 5 version is the latest version and is the market standard at the current point of time.

If one wants to write HTML in some other version, which is definitely not recommended, one can use that version specific declaration at the top of the document.

"html" tag

The html tag or element is master element of a web page. It is the root of a web page and all elements have to be nested inside this html element.

"head" tag

The head tag or element contains all the meta-information about the web page. This meta-information is the information about the page that does not need to displayed in the browser. However, information or elements inside this tag are certain other purposes, like for SEO, linking to other external files such as stylesheets etc.

"title" tag

The title tag / element specifies the title of a web page which appears in the browser's tab.

"body" tag

The body tag or element contains all the information which one wants to show to the readers of the web page. These may include text content and images. In short, this tag helps show human readable content on a web page.

"h1" tag

The h1 tag or element specifies a certain piece of text that is written inside this tag, as level 1 heading text and displays that as such. There are six levels of headings in HTML starting from h1 until h6.

"p" tag

The p tag or element specifies the regular text on a web page. This element identifies a piece of text written inside this tag as paragraph element.

Conclusion

The points to remember mentioned in this post are as follows:

  • The "<!DOCTYPE html>" declaration defines that this document is an HTML5 document.
  • The "<html>" element is the root element of an HTML page and both "head" and "body" elements are to come inside this element.
  • The "<head>" element contains meta information about the HTML page which is not visible to readers of a web page.
  • The "<title>" element specifies a title for the HTML page which is shown in the browser's tab.
  • The "<body>" element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images etc.
  • The "<h1>" element defines a level 1 heading. There are six levels of headings available in HTML.
  • The "<p>" element defines a paragraph which means it is a regular text.