HTML Document Structure - Naukri Code 360

HTML is an abbreviation for HyperText Markup Language, the most frequently used language on the Internet for developing web pages.

HTML, as previously said, is a markup language that uses multiple tags to structure the document. These tags are surrounded by angle braces <Tag Name>. Except for a few tags, the majority of tags contain matching closing tags. For example, a <head> tag has a closing tag </head>, and a <body> tag has a closing tag </body> tag, and so on. The following template shows a basic structure of a HTML document.

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="utf-8">
  <title>Title of the webpage</title>  
</head>

<body>
  <h1>Heading Tag</h1>
  <p>Paragraph Tag</p>
</body>
</html>

Tag name	Description
<!DOCTYPE ....>	This tag defines the document type and HTML version.
<html>	This tag encloses the whole HTML page and consists mostly of the document header (represented by <head>...</head> tags) and the document body (represented by <body>...</body> tags).
<head>	This tag represents the document's header, which includes additional HTML tags such as <title>, <link>, <meta> and so forth.
<meta>	The <meta> tag is used to define metadata about an HTML document. Metadata is information (data) about the document.
<title>	The <title> tag is used within the <head> tag to specify the document’s title.
<body>	This tag represents the document's body, which contains additional HTML tags such as <h1>, <div>, <p>, and so on.
<h1>	This tag represents the heading. There are six different HTML headings from <h1> to <h6>.
<p>	This tag represents the paragraph.

The list does not end here; there are several other tags to get started with HTML.

Let's take a closer look at each tag:

<!DOCTYPE>

The <!DOCTYPE> declaration indicates the document type and assists browsers to display web pages appropriately.
It must appear just once, at the top of the page (before any HTML tags).
Every HTML document must begin with a <!DOCTYPE> declaration.

Declaration in HTML5:

<!DOCTYPE html>

Since the declaration of <!DOCTYPE> tag is NOT case-sensitive; the below declarations are valid.

<!DOCTYPE html> 
<!DocType html>
<!Doctype html>
<!doctype html>

<html>

The <html> HTML element is often known as the root element because it represents the root (top-level element) of an HTML page. All other elements must be descended from this one.
Except for the <!DOCTYPE> tag, the <html> tag serves as a container for all other HTML elements.
To specify the Web page’s language, always use the lang attribute inside the <html> tag. This is intended to help search engines and browsers.

<html lang="en">
  -----
  -----
</html>

<head>

The HTML tag <head> includes machine-readable information (metadata) about the document, such as the title, scripts, and style sheets.
The <head> tag is generally used to store information for machine processing rather than for human reading. The <header> element is used to display human-readable information such as top-level headers and listed authors.

<head>
  <meta charset="utf-8">
  <title>Document's title</title>
      ------------
</head>

The following tags can go inside the <head> tag:

<title> (required in every HTML document): This tag defines the document’s title.

Example:

<title>Grandma's Heavy Metal Festival Journal</title>

<style>: The HTML element <style> includes style information for a document or a portion of a document. It includes CSS that is applied to the contents of the document that contains the <style> element.

Example:

<style type="text/css">
p {
 color: #26b72b;
}
</style>
<p>Hi! I am a paragraph</p>

<base>: The <base> HTML element defines the reference point for all relative URLs in a document.

Example:

<base href="https://www.example.com/">
<base target="_blank">
<base target="_top" href="https://example.com/">

<link> : The <link> tag establishes a connection between the current content and an external resource.

Example:

<link href="/media/examples/link-element-example.css" rel="stylesheet">

<p>This text will be red as defined in the external stylesheet.</p>

<meta> : The <meta> element defines metadata about an HTML document. Metadata is data (information) about data.

Example:

<!--> A character set is the total amount of distinct characters that a computer program and hardware can support. Character sets are also known as character maps, charsets, and character codes.</!-->
<meta charset="utf-8">

<script> : The <script> tag is used to integrate a client-side script (JavaScript).

Example:

<script src="javascript.js"></script>

<noscript>: The <noscript> element specifies alternate content to be presented to users who have scripts deactivated in their browser or are using a browser that does not support script.

Example:

<script>
  document.write("Coding Ninjas")
</script>
<!--> When the above tag fails to display the content owing to the browser's lack of support, the <noscript> tag is used. </!-->
<noscript> Computer Portal </noscript>

<body>

The content of an HTML document is represented by the <body> HTML element.
A document can only have one <body> element.
The <body> element includes all of the content of an HTML page, including headers, paragraphs, pictures, hyperlinks, tables, lists, and so on.

Example:

<html>
<head>
  <title>Document title</title>
</head>
<body>
  <p>This is a paragraph</p>
</body>
</html>

<p>

A paragraph is represented by the HTML element <p>. In visual media, paragraphs are often portrayed as blocks of text separated by blank lines or the first-line indentation. In contrast, HTML paragraphs can be any structural grouping of related content, such as images or form fields.
Paragraphs are block-level elements, and if another block-level element is processed before the ending </p> tag, they will automatically close.
The block-level element begins on a new line. A block-level element always occupies the entire available width (stretches out to the left and right as far as it can).

Syntax:

<p>---content---</p>

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Paragraph tag Example</title>
</head>
<body>

  <h1>The p element</h1>

  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</body>
</html>

Output:

This is only a brief overview of the HTML Document Structure; there are many more elements and tags to learn in HTML.

Frequently Asked Questions

What is an HTML Document structure?

The structure of a Web page is described in HTML. HTML is made up of several different elements. HTML elements specify how the content should be displayed in the browser. HTML elements are used to identify different types of information, such as "this is a heading," "this is a paragraph," "this is a link," and so on.

What are the basic five elements of the HTML Document structure?

Doctype, HTML, title, head, and body are the basic five elements. These are the tags that go at the top and bottom of an HTML file. This contains title, meta tags, content type, and connections to external pages such as CSS and JavaScript.

What is the difference between HTML and XHTML?

HTML5 is a version of HTML, whereas XHTML is a mix of HTML and XML. XHTML has its own parsing needs, but HTML doesn't have any and works with what it has. HTML5 uses a less complicated charset and doesn't require type attributes or style elements.

Conclusion

To summarise the subject, we looked at the basic tags used in HTML document structure and how they work. The list doesn't stop there; HTML has various tags and elements, which you can refer to in our other articles. Keep a lookout for future posts to help you along your growth path.

You can also consider our Online Coding Courses such as the DSA in Python, C++ DSA Course, DSA in Java Course to give your career an edge over others.

Happy Learning Ninja!