HTML Basic Elements must Know for Beginners

Html Headings

Share This Post

Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on google

HTML Headings:  Earlier I discussed them in short, now I am explaining them in detail. Let’s learn about them. HTML contains six levels of headings. A heading level varies with font changing, paragraph breaking before and after and any white space required to render the heading. The heading elements are in continuous levels from counting 1-6 like H1, H2, H3, H4, H5 and H6 where H1 is highest and H6 is least. These are basically titles or subtitles on a web page. Heading displays the document structure of the webpage. H1 is the main heading, then H2, followed by H3 and so on.

For Example:

Input:

<h1> Beetles </h1>
  <h2> External morphology </h2>
    <h3> Head </h3>
      <h4> Mouthparts</h4>
    <h3> Thorax </h3>
      <h4> Prothorax </h4>
      <h4> Pterothorax </h4>

Output:

Beetles

External morphology

Head

Mouthparts

Thorax

Prothorax

Pterothorax

Example Page :-

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>
 
<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>
 
<h3>Example 2</h3>
<p>Some text here...</p>
 
<h2>See also</h2>
<p>Some text here...</p>

Result

Heading elements

Summary

Some text here…

Examples

Example 1

Some text here…

Example 2

Some text here…

See also

Some text here..

When they are displayed on Page, they are bold and size of the text also changes. Size totally depends upon level of headings.

These headings can also used with html nested elements :-

<!DOCTYPE html>     
   <html>
     <head>     
      <title> Heading elements </title> 
     </head> 
    <body>
  <h1>This is main heading of page. </h1>  
    <p>h1 is the most important heading, which is used to display the keyword of page </p>  
      <h2>This is first sub-heading</h2>                                        <p>h2 describes the first sub heading of page.</p>
   <h3>This is Second sub-heading</h3> 
   <p>h3 describes the second sub heading of page.</p>  
   <p> h1 to h6 tags are used for sub headings if they are required.Headings </p>  
  </body>           
 </html>  

Output:

They are supported in almost all important browsers. Here is the list

Element chrome IEFirefoxOperaSafari
<h1> to <h6>YesYesYesYesYes

HTML Nested Elements

A nested element is nothing but a child element. It can also be a parent element if other elements are nested within it.

Now what is HTML nested elements , suppose you want to make one word in bold in that sentence which is already contained within HTML element for example :

<p>Example: This is a <strong>sentence</strong> of text.</p>

As you can see that there is one box (the paragraph) which contains the content of the sentence and there is also a second box (the strong tag pair), which renders that word as bold.

You can add more nested tags. Suppose in the same sentence you want to make one or more two words italic then example would look like

<p>Example: This is a <strong>sentence</strong> of text and it also has some <em>italicized text</em> too. This is big paragraph and the big sentence</p>

As you can see that, there are three boxes one is paragraph , second is bold and third is italic. Italic and bold are nested within paragraph.

If we take one more example :

<div>
<p>Example: This is a <strong>sentence</strong> of text and it also has some <em>italicized text</em> too.</p>
<p>This is another paragraph.This is a next line</p>
</div>

In this, div is the outer box others are same like above. This means others are nested within div outermost division.

Nesting div elements is a common example of nested elements that is placing one div inside other div.

The <div class=”outer-div”> is used to group together two <div class=”inner-div”> elements; each containing a <p> element.

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

Result:

Nesting inline and block elements While thinking about block elements you should keep in mind, that there should be inline and block elements and block elements “add a line break “. 

You should avoid deep <div> nesting 

It shows a bad coding style. Make sure div section Element should be not nested deeper than 6 layers.

Also all html documents consist of nested HTML elements. Like in below example:-

<!DOCTYPE html>
<html>
<body>

<h1> My First Heading </h1>
<p> My first paragraph. </p>

</body>
</html>

It contains four elements < html>, <body>, <p> and <h1>.The html is outermost division and others are placed within it. Then, inside the <html> element there is a <body> element

Example Explained:-

<body>

<h1> My First Heading </h1>
<p> My first paragraph .</p>

</body>

Then, inside the <body> element there is two other elements: <h1> and <p>:

<h1> My First Heading  </h1>
<p> My first paragraph. </p>

The <h1> element defines a heading.

<h1>My First Heading</h1>

The <p> element defines a paragraph.

<p>My first paragraph.</p>

You should never skip end tag. For example :-

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

Output :

This is a paragraph.

This is a paragraph.

HTML Empty Elements :

The elements that contain no content are called HTML empty elements.

Example :-

<p>This is a <brparagraph contains a  break.This is line.This is a ball</p>

The <br> tag is called line break. It is an empty element that is without a closing tag. This means these elements have no child nodes that is nested elements or text nodes.

Output:

This is a paragraph that contains a break. This is line. This is a ball. 

There some HTML empty element examples as follows:-

  • <base>
  • <br>
  • <col>
  • <hr>

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Digital Marketing

How to begin and originate your own online business

State, labor, property, and entrepreneurship are traditionally deemed the four significant powers of creation. Although the Internet ought revolutionized. Moreover, there is immeasurable news for

YouTube images
Digital Marketing

Why no one talks about YouTube anymore

According to the people, thoughts the golden age of youtube is completed He’s remaining on the head of his seat as his twin sibling and

Do You Want To Boost Your Business?

drop us a line and keep in touch

small_c_popup.png

Subscribe to our Newsletter