- HTML Course
- HTML Tutorial
- HTML Document Structure
- HTML Root Tags
- HTML Flow Tags
- HTML Interactive Tags
- HTML Basic Tags
- HTML Paragraph
- HTML Line Break
- HTML Horizontal Line
- HTML Images
- HTML Data Types
- HTML Attributes
- HTML Character Entities
- HTML Styles
- HTML Formatting Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML List
- HTML Tables
- HTML Forms
- HTML action Attribute
- HTML Multimedia
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.
<!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>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.
« Previous Tutorial Next Tutorial »