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 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.

<!DOCTYPE html>
<html lang="en">
         .codescracker{background: peru; color: white; padding: 12px;}
   <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>


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.

HTML Online Test

« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook

Subscribe Us on YouTube