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

What do you want to Learn Today?

  • Programming
    • C/C++
    • Python
    • Java
    • HTML CSS
    • SQL
  • CSE Subject
    • Compiler Design
    • Computer Network
    • COA
    • Data Structure
    • DBMS
    • Operating System
    • Theory of Automata
    • Web Technology
  • Linux
  • Trend
    • Artificial Intelligence (AI)
    • Big Data
    • Cloud Computing
    • Machine Learning (ML)
  • GATE CSE 2020
    • Self Study Plan
    • Complete Syllabus
    • FREE Test Series
    • Topper Interview (AIR 15)
    • Recommended Books by Topper
  • Career
    • Placement Interview
    • Jobs
    • Aptitude
    • Quiz
  • Material
    • Recommended Books
    • Software Installation
  • Contribute to Us
    • Write for Us
    • Submit Source Code or Program
    • Share Interview Experience
  • Tools

7 Basic HTML Tags with Example [Most Useful in Every Web page Development]

Aniruddha Chaudhari/29 Jul, 18/3744/2
CodeHTML & CSS

In this tutorial, you will find 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 Content:

  1. Creating HTML paragraph
  2. How to set Text Header in HTML?
  3. Different HTML Tags for Text Formatting
  4. How to add Table in HTML?
  5. Linking other Web pages in HTML
  6. How to Create List in HTML?
  7. How to Add Images in HTML?

Syntax for 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 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.

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 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,

These are the 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 the better understanding of HTML and web development.


« Writing Your First HTML Program

HTML

Related Posts

CodeHTML & CSS

My Top 17 CSS Performance Optimization Tips for You [Online tool Inside]

CodeHTML & CSS

HTML Program Examples with Output [Writing Your First HTML Page]

CodeHTML & CSS

How to Pass Data to Another Page using JavaScript localStorage?

Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold 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 Portal.

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.

Leave a Reply Cancel reply

Interview Experiences

AccentureAgriChain Akamai Amazon Amdocs American Express Attra Infotech BARC Barclays BlockGrain BYJUS Cisco Cognizant Coupon Dunia Credit Suisse DE Shaw Druva Experis IT Eze Software Factset Fiorano General Electric Incture Technologies Infosys Kasmo Cloud Microsoft MindTree Mu Sigma Numerify Opteamix Oracle Persistent Pole to Win Qualcomm Reliance Riverbed Syntel TCS Tech Mahindra Teradata Terralogic Virtusa Wipro

Interview Questions



You can share your interview experience.

Don’t Miss !

Latest Articles

Cisco Online Test Pattern and Interview Questions for Freshers


[7 Best Tips] How to Make Daily Study Timetable and Stick to It?


Persistent Written Test and Technical Coding Questions [Paper Pattern]


10 Top Website Design Tips for Small Business to Boost Up Your Sales


Main Difference Between remove del and pop in Python List


Tech Mahindra Placement (Online Test | Essay Writing | Interview Questions)


Importance of Career Exploration for High-School Students | Why?


Favorite Topic

AI algorithm array bigdata bit manipulation career Code Computer Network cpp data analytics database data scientist Data Structure db DBMS difference between Django education GATE GATE Topper Interview HTML ibm IBM ISDL interview IP address Java JavaScript Jobs Linked List linux linux cmd nit OOPs Concept os Programming Python python list Qualcomm SOAP sorting stack string vim webbrowser web development

Contribution to Community

  • Contribute to CSEstack Portal
  • Submit Your Source Code or Program
  • Share Your Interview Experience
  • CSEStack Leadership Board
  • Campus Ambassador Program by CSEstack

About CSEstack Portal

  • About CSEStack:
  • Contact Us
  • CSEStack Campus Ambassador
  • Recommended Books by Expert

© 2019 – CSEstack.org. All Rights Reserved.

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