HTML Basic Tags

byLearn Code and Programing -
0
HTML Basic Tags

HTML Headings

There 6 six headings in the HTML ,from <h1> to <h6> .These headings have different font size from each other ,the h1 is the largest heading and h6 is the smallest headings. This are used to define headings or title on a webpage.

<h1> Main Heading

<h1> is the most important heading in HTML. It represents the title of a webpage or section within it. Google and other search engines give high priority to <h1>, and therefore, it is important for SEO (Search Engine Optimization). For the best SEO structure, only one <h1> should be used per page.

EXAMPLE

<h1> Welcome to HTML Tutorial </h1>

Default Style: Bold and large (32px to 36px depending on the browser)

<h2> Subheading

<h2> is used for subheading under the main heading <h1> .You can use it to define sections like "Introduction", "Benefits", "Examples", etc. So there is not limit for <h2> tags and you can use multiple times on a page to divide the content.

EXAMPLE

<h2> HTML stands for HyperText Markup Language.</h2>

Default Style: Smaller than <h1>(24px to 30px)

<h3> Sub-subheading

<h3> is used inside the <h2> section.When we create subsection in <h2> so we used the <h3>. It’s organizing detailed topic inside large sections. Best used when you need such content structure.

EXAMPLE

<h3> HTML Tags </h3>

Default Style: Medium size (around 20px to 24px)

<h4> Lower-Level Heading

<h4> is Lower-Level Heading that can be used under <h3> In HTML, <h4> represents a heading, specifically the fourth level of heading. It is used to create subheadings within a webpage, providing further organization and structure to the content.

EXAMPLE

<h4> Six Heading tags in the HTML. </h4>

Default Style: Smaller than <h3> (around 18px to 20px)

<h5> Small Heading

<h5> is rarely used but also used for footnotes,side notes,or small group titles.

EXAMPLE

<h5> HTML is a case-insensitive </h5>

Default Style: Quite small (around 16px)

<h6> Smallest Heading

<h6> is the smallest heading and it rarely used.It used for minor content.

EXAMPLE

<h6>Smallest Heading</h6>

Default Style: Very small (around 12px to 14px)

HTML Online Editor

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
  </body>
</html>
body { background-color: #f0f0f0; } h1 { color: red; }
document.querySelector('h1').onclick = () => { alert("Heading clicked!"); };


Paragraph Tag

<p> tag in HTML stand for paragraph.It serves the purpose of establishing a separate block of text as a paragraph; It is the simplest and frequently used element for adding content in a webpage.

  1. Organizes text into sections that can be read easily.
  2. Automatically adds space (margin) before and after the text.
  3. Help in Search Engine Optimization (SEO) by organizing the content appropriately.

EXAMPLE

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

<!DOCTYPE html> <html> <head> <title>Paragraph Example</title> </head> <body> <h1>Welcome to My Web Page</h1> <p>This is my first paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Line Break Tag

The <br> In HTML, "line break" is represented by the
tag. When you want the text to begin on a new line without beginning a new paragraph, you use this technique. This is particularly useful when writing poetry, addresses, or any other type of content where manually breaking the line enhances readability.

Features of <br> Tag

  1. Inline Tag:It just breaks the line there; unlike a paragraph, it doesn't add extra space.
  2. Self-closing: A closing tag is not necessary (</br> is incorrect).
  3. No additional margin: It doesn't add space before or after like

    does.

  4. Note: The <br> is empty tag and does not need a closing tag.
SEO Tip:

Don't use <br> too much for layout. Use it only when a line break is necessary to convey the meaning of the content. Use semantic tags such as <p>, <h1>–<h6>, <ul>, and others to organize content for improved SEO and accessibility.


<!DOCTYPE html> <html> <head> <title>Line Break Example</title> </head> <body> <p>Hello<br>You delivered your assignment on time.<br>Thanks<br>Mahnaz</p> </body> </html>

Center Tag

In HTML the <center> is used to center the content like text,image or other element on a webpage.The <center> tag is deprecated in HTML5. This means their is no longer recommended and should not be used in modern website.

Deprecated Method(Not Recommended)
<center>This method is deprecated.</center>

Modern Method (Recommended)
<p style="text-align: center;">This method is Recommended.</p>

<!DOCTYPE html> <html> <head> <title>Modern Center Example</title> <style> .center-text { text-align: center; } </style> </head> <body> <div class="center-text"> <h2>This heading is centered using CSS</h2> <p>This paragraph is also centered.</p> </div> </body> </html>


Horizonal Rule Tag

In HTML, a horizontal line is created across the webpage using the <hr> (horizontal rule) tag. It is frequently used to visually divide sections or content.The<hr> tag is empty tage and does not need a closing tag.The<hr> is regarded as semantic in modern HTML (HTML5), meaning:It is not just line but it signifies a break in the section or topic.The content before and after this line are different in meaning or purpose.

EXAMPLE

<p>This is a top of paragraph .</p>
<hr>

<!DOCTYPE html> <html> <head> <title>Horizontal Line Example</title> </head> <body> <p>This is the first section of the paragraph</p> <hr> <p>This is the second section of the paragraph</p> </body> </html>


Preformatted text

The <pre> tag is represented the preformatted text and used in HTML to display the text exactly as in typed in the HTML document, including line breaks, tabs, and spaces. The <pre> tag is the best option if you want the content to show up on the page with the same spacing and layout as it does in your HTML file. When displaying source code or any other text where the original formatting—like indentation and line structure is crucial, it's extremely helpful. Because <pre> doesn't compress white space like other tags do, you have complete control over how your text appears.

<!DOCTYPE html> <html> <head> <title>Pre Tag Example</title> </head> <body> <pre> Name: SK Course: Web Development Language: HTML, CSS, JavaScript </pre> </body> </html>
Tags:
Previous Post Next Post