HTML Basic Elements

by
Previous
Next

Important HTML Elements

1) Headings

Headings are used to define titles and subheadings on our webpage. These help to organize content and improve both readability and SEO.

HTML headings provides six Tags, such as:

  • <h1></h1>
  • <h2></h2>
  • <h3></h3>
  • <h4></h4>
  • <h5></h5>
  • <h6></h6>

1) <h1></h1> → This is the main and most important Title of our web page. It’s used only once time in a page. For example:

<h1>Welcome to My Website</h1>
  • You can see the live preview of the web page. That is the H1 tag.

2) <h2></h2> → This is a Section Title that is used for main sections under <h1>. For example:

<h2>About Us</h2>

3) <h3> </h3> → It is a Subsection Title that is used under <h2> headings for smaller topics. For example:

<h3>Our Mission</h3>

4) <h4> </h4> → Minor Subsection Title that used for detailed points under the <h3> heading. For example:

<h4>Core Values</h4>

5) <h5> </h5> → This is the small heading, and it is rarely used in a web page, but can highlight less important sub-points. For example:

<h5>Community Engagement</h5>

6) <h6> </h6> → Smallest Heading that is useful only for small notes or labels.

<h6>Last Updated: August 2025</h6>

We have explained all the Headings with the proper examples, so you can learn through this link: HTML Headings

Tip: If you want to check the heading type of any page, you can use the inspect method. Open web page > right click > click on inspect > check the heading types.

2) Paragraphs

Paragraphs are used to add text blocks on a webpage. When you want to add one or more paragraphs, you use multiple <p> elements for it. For example:

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

<p>Box of learn is the web tutorials platform.</p>

<p>Hello, my name is John. I am learning HTML in 2025.</p>

Meaning, the browser will display all these paragraphs as a separate block with some space.

3) Links

Links (hyperlinks) connect one webpage to another or link to other resources such as documents, images, or videos.

This method allows users to navigate between pages on the site or external websites.

<a href="https://boxoflearn.com">Visit BoxofLearn</a>
  • <a> is an opening anchor tag that starts the link.
  • href=”URL” is an attribute that defines the link’s destination.
  • </a> is a closing anchor tag that ends the link.
  • “Visit BoxofLearn” is a clickable text that is visible to the user.

4) Images

The <img> tag is showing the pictures, graphics, or icons on a webpage.

<img src="image.jpg" alt="Description of the image">
  • alt = It is showing an alternative text on the image. If your image can’t load on your site, this text will appear to the user. It’s also used for SEO.
  • You can also set the width and height of the image.
<img src="image.jpg" alt="Sample" width="300" height="200">

5) Lists

List elements are useful when you want to display multiple items in a structured way. HTML supports two main types of lists:

1) Ordered List ( <ol> ) = This tag is used when items are shown in a specific numbered sequence. This method is useful for ordering items. For example:

<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>

Output will look like this:

  1. First Item
  2. Second Item

2) Unordered List (<ul>) = In this list, all the items are shown as bullet points without any specific order. Useful when order doesn’t matter.

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

Output of this list:

  • First Item
  • Second Item

Attributes in HTML

Attributes provide extra information on an element. They are always written inside the opening tag, like the following format:

attributeName="value"

Real-life example:

<p style="color: red;">This is red text.</p>
  • Here, the style is the attribute name.
  • “color: red;” is the value that changes the appearance of the text.

Examples of common attributes:

  • id
  • class
  • src
  • href
  • alt

These attributes are used to link Internal and External CSS on the webpage. Click on the link and learn whole attributes with proper examples: What Are Attributes In HTML.

Nested Elements

Nesting elements means we can place elements inside other elements. It helps to create structures and organized web page layouts.

For example:

<div>
    <h1>About Me</h1>
    <p>Hello! I am learning HTML.</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</div>

You can see that <li> is inside the <ul> elements, and the whole elements are inside the <div> elements.

Continue Learning HTML with Important Topics

We will create a whole HTML webpage with internal CSS in further topics, so continue to learn HTML for your web development journey.

Previous
Next

Leave a Comment