Understanding the HTML tags, structure and categories | CoderGuy

Sadanand - April 23, 2020
Hello everyone, welcome to CoderGuy (A free platform to learn different programming languages) I am Sadanand, after completing today's article you'll be able to understand the doctype declaration, types of HTML tags, and much more. so let's begin with the structure of HTML.

Structure of HTML document

Doctype declaration

<!DOCTYPE html> The doctype declaration helps the browser to display web pages correctly and represent the document  type
It must appear before all the tags even before root tags.

It is not a case sensitive

<!DOCTYPE html> is a declaration for HTML 5 document means that the document belongs to html5.
Html 5 supports audio, video, or media tags.

<html></html> This is the root element of an HTML page. The entire web page is enclosed within these tags. There are two parts of it:
Document head: <head></head> This element contains meta-information about the document which is essential for the internal working of the document.
HTML tags, structure and categories

Document title: <title></title> This element contains the title of the document which is displayed on the top of the browser tab window.

Document body: <body></body> our most of coding goes between this tag. It includes all the tags attributes and information that one wants the browser to display.
Here is the basic structure of an HTML document

<!DOCTYPE html>
<html>
<head>
    <title>HTML structure</title>
</head>
<body>
    <p>Our all content goes here, within the body tag</p>
</body>
</html>

In the above code, I have declared doctype means document belongs to HTML 5. next line HTML tag which begins the document, next line head tag which is for browser internal use, next line body tag where we will do most of our work and finally closing all the tags when our work in that particular tags finishes.

Categories of HTML tags

It is divided into two categories

(i) Paragraph level tags: 

This applies to the formatting of the section of tags

(ii) Character level tags: 

This applies to the individual letter or words

Types of paragraph formatting tags

  • Heading tags
  • BlockQuote tag
  • Preformatting tag
  • Horizontal tag
  • paragraph tag
  • Break tags
  • Adress tag
Let's understand all the paragraph formatting tags one by one

Heading Tags

The text within this tag is automatically formatted in bold depending on the heading level with vertical space above and below the line.

Heading level
There is six-level in HTML heading tag <h1><h2><h3><h4><h5>and<h6>, where h1 is the largest and h6 is the smallest tag. below is the sample code
<!DOCTYPE html>
<html>
<head>
    <title>HTML title</title>
</head>
<body>
<p>Below all the heading tags @CoderGuy.tech</p>
    <h1>this is h1 tag<h1>
    <h2>this is h2 tag<h2>
    <h3>this is h3 tag<h3>
    <h4>this is h4 tag<h4>
    <h5>this is h5 tag<h5>
    <h6>this is h6 tag<h6>
</body>
</html>
Attributes of heading tag
align=left/center/right 
  • use left to align the left heading, this is default applied heading
  • use center to align the heading in the center
  • similarly, use the right to right-align the heading.

Tags:

Post a Comment

0 Comments

Enter your message here