• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

List of All Basic HTML Tags Exaplained with Example

Aniruddha Chaudhari/56985/4
CodeHTML & CSS

Do you want to learn the most useful basic HTML tag that will be very useful in every web page development?

In this tutorial, you will find a list of all basic HTML tags. Knowing the syntax of these HTML tags will help you at every stage of your web page development.

learn HTML tags

HTML is markup language and it is used to create web pages. You can run HTML code in the browser so you don’t need any external software to test the HTML code from this tutorial.

Let’s start…

Table of Contents

  • The Syntax for All basic HTML tags with Example
    • 1) Creating HTML Paragraph
    • 2) Setting Text Header in HTML
    • 3) Different HTML Tags for Text Formatting
    • 4) How to Add Table in HTML?
    • 5) Linking other pages in HTML
    • 6) How to create List in HTML?
    • 7) How to Add Images to your HTML page?

The Syntax for All basic HTML tags with Example

In this tutorial, for practicing and running HTML code, use Online HTML editor. Copy the example code given below into the online HTML editor and run it.

Pro Tips: Executing code practically is always preferable and good practice for any programmers, rather than just reading it.

1) Creating HTML Paragraph

HTML has <p> tag to define the paragraph for the web page. The text inside the <p> and </p> tags will be considered as one paragraph.

Example:

<body>
<p>Here is text from the first paragraph.</p>
<p>Here is text from the second paragraph.</p>
</body>

If you run this code, you can see, every paragraph starts with the new line.

2) Setting Text Header in HTML

To defines the header in HTML, there are six tags from <h1> to <h6>. The tag<h1> has the most important whereas <h6> has the least important.

Example:

<h1> header one</h1>
<h2> header two</h2>
<h3> header three</h3>
<h4> header four</h4>
<h5> header five</h5>
<h6> header six</h6>

HTML Header tags with its importance.

HTML header tags

Usually, the font size of the header text decreases from tag <h1> to <h6>.

3) Different HTML Tags for Text Formatting

Following is the list of tags you can use for text formatting.

HTM Tags Description
<b>…</b> Describes bold text
<em>…</em> Describes emphasized text
<i>…</i> Describes italic text
<small>…</small> Describes smaller text
<strong>…</strong> Describes important text
<sub>…</sub> Describes subscripted text
<sup>…</sup> Describes superscripted text
<ins>…</ins> Describes inserted text
<del>…</del> Describes deleted text
<mark>…</mark> Describes marked/highlighted text

Description for each tag is straightforward to understand. Try using different text formatting tags in your HTML code to realize the difference between them.

Let’s make it bit entertaining 😉

HTML Tags for Text Formatting example

HTML is a fun 😀

4) How to Add Table in HTML?

HTML has <table> tag to create table. <table> tag consist of <tr> (table row) tags. And each table row tags can have  <th> (table header) or <td> (table data) tags.

HTML code for table:

<table>
  <tr>
    <th>Student Name</th>
    <th>Class</th> 
    <th>Score</th>
  </tr>
  <tr>
    <td>Bob</td>
    <td>10</td> 
    <td>78</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>9</td> 
    <td>67</td>
  </tr>
</table>

Below image explains detail about HTML table tags.

HTML code for table explained

 

5) Linking other pages in HTML

You can add links in your HTML text.

There are two types of the link- internal link and external link. If you are linking page to your own website page, it is called as an internal link. If you are linking to any other website page, it is called as an external link.

HTML syntax for Adding Link:

<a href="url">Anchor Text</a>

Here, the link text is also called as anchor text.

6) How to create List in HTML?

There are two types of list- an ordered list and an unordered list.

Tag <ul> is used for unordered list. Tag <ol> is used for the ordered list.

Here, <li> is list item tag.

An Unordered HTML List Example:

<ul>
    <li>Python</li>
    <li>C</li>
    <li>Java</li>
</ul>

An Ordered HTML List Example:

<ol>
    <li>Python</li>
    <li>C</li>
    <li>Java</li>
</ol>

Items in the ordered list are listed by ascending numbers.

HTML ordered unordered list

7) How to Add Images to your HTML page?

Here is Simple syntax for adding an image in your HTML page.

<img src="url">

The src is an attribute to which you need to pass the complete path of the image.

You can also add some other attributes:

alt – This attribute is to define an alternative name for the image.

What is the use of the alt tag?

And there are many purposes for using it. This name will be shown to the user if the image is not able to load properly (because of poor internet connection). It is also used by the search engine to identify the image.

width and height – With these attributes, you can provide the dimensions of the image to display.

<img src="example.jpg" alt="instance" width="500" height="333">

PS: The images displayed above in this post are the example of using the img HTML tag.

Other HTML tags you can use for Web development:

  • How to Create Drop Cap using CSS and HTML Code?
  • Simple Code to save HTML page as PDF

Finally…

This is the complete list of all basic HTML tags. And you will be using them in almost every web page development. So, make the practice of using them.

Now a day, there are many online HTML editors available. With the simple drag and drop options, you can create HTML objects without worrying about syntax. But, it is still necessary to know the basic syntax for a better understanding of HTML and web development.

Python Interview Questions eBook

HTML
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    Chathura Meegama
    July 31, 2018 at 10:20 am

    Impressive Post ! Very Informative

    • Reply
      Aniruddha Chaudhari
      July 31, 2018 at 10:22 am

      Thanks, Chathura! I’m glad you find it informative.

  • Reply
    Alan E
    November 6, 2021 at 12:09 pm

    Explained it very nicely. Thank you.

    • Reply
      Aniruddha Chaudhari
      November 25, 2021 at 9:14 am

      You’re welcome. I’m glad you like it.

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard