HTML Root Tags

The "HTML root tags" are going to be broken down for you here, along with some examples, so that you can gain a better understanding of them. So without further ado, let's get this party started.

Root tags in HTML denote the primary or beginning tag, and it is required for all HTML documents to contain these tags. The <HTML> tag comes immediately after the <!DOCTYPE> tag and is the one that specifies all of the other HTML tags that come after it. Using this tag, the browser is able to determine the type of document being viewed.

We can refer to the <!DOCTYPE> tag as the root tag of an HTML document. Therefore, the two root tags of an HTML document are: <!DOCTYPE> and <HTML>.

Please note: The DOCTYPE type declaration is used to trigger the standard rendering mode. This declaration defines the document type as being HTML.

HTML Tag Attributes

The table that follows provides a succinct explanation of the attributes that can be used to alter the behavior of an HTML element. On the other hand, I defined only the basic and well-known attributes in a separate article, which you might find interesting to peruse.

Attribute	Value	Description
class	class-name	specifies the class for an element in an HTML document
id	unique-id	specifies a unique alphanumeric identifier for an element
dir	ltr - left to right rtl - right to left	specifies the text direction for an element's content
lang	language-code	specifies the base language used for an element
xmlns	http://www.w3.org/1999/xhtml	declares a namespace for tags used in an HTML document
xml:lang	language-code	This attribute specifies the base language for an element in extensible hypertext markup language (XHTML) documents
hidden	hidden	declares an element as a hidden element. Hidden element are not displayed in the document
manifest	Universal Resource Locator (URL)	defines a URL containing the document's cache information
contextmenu	menu-id	specifies the context menu for an element
contenteditable	true, false	specifies whether or not you can edit the content in the document
accesskey	character	specifies a keyboard shortcut to access an element
draggable	true, false, auto	specifies whether or not you can drag an element
tabindex	number	specifies the tab order index of an element
spellcheck	true, false	specifies whether an element should be checked for spelling and grammar or not
style	style-definition	specifies an inline style in the HTML document by using the <style> element
title	text	specifies the title of an HTML document

HTML Root Tags Example

The following is an example of the HTML root tags. In this example, the two root tags, which are DOCTYPE and HTML, are necessary, whereas I will use other tags along with some attributes to some elements.

HTML Code

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .codescracker{background: peru; color: white; padding: 12px;}
      </style>
   </head>
<body>
   
   <p class="codescracker">This is a paragraph.</p>
   <p dir="rtl">This is another paragraph.</p>
   <p class="codescracker">My name is William.</p>
   <p style="color: purple; font-size: 32px;">What is yours?</p>

</body>
</html>

Output

This is a paragraph.

This is another paragraph.

My name is William.

What is yours?

In the above example, I used the "lang" attribute with its value "en" to tell the search engine that the content on this web page is in "english."

Inside the "BODY" tag, I used four paragraphs:

The first "P" is written along with an attribute named "class" with a value of "codescracker." Therefore, we can use this "codescracker" value to fetch all the elements and styles or make other changes to the element. Only the elements with the class value "codescracker" have been styled. That is, I changed its background color, color, and padding.
The "dir" attribute is used to change the text displayed from right to left by using the value "rtl."
And at last, I used the "style" attribute to apply the inline style.