Interactive HTML Learning Lab
Click the copy icon to grab code, or click "Try Yourself" to experiment live!
What Are HTML Tags?
HTML tags are special keywords written inside angle brackets, such as <p>, <a>, <img>, or <table>. They tell the browser how to structure and display content on a webpage.
For example:
<h1>creates a main heading<p>creates a paragraph<a>creates a clickable link<img>displays an image<table>creates a table<form>collects user input
Most HTML tags have an opening and closing form, such as:
<p>This is a paragraph.</p>Some tags can also work as self-closing tags, such as:
<br>
<hr>
<img src="image.jpg" alt="Example image">Why Learning Basic HTML Tags Is Important
If you understand HTML tags, you can:
- Build your own webpages from scratch
- Edit Blogger or WordPress HTML sections more confidently
- Understand how website layouts are structured
- Create educational projects, forms, tables, and practice pages
- Learn CSS and JavaScript more easily later
HTML is often the first step into web development, so getting comfortable with tags makes everything else much easier.
Basic HTML Tags Every Beginner Should Know
Below are the most important HTML tags from the HTML tags chart, explained in simple language.
1) HTML Document Structure Tags
These tags form the basic structure of an HTML page.
<html>
This is the root of the HTML document. Everything on the webpage sits inside this tag.
<html>
...
</html><head>
The <head> section stores information about the page, such as the title, meta tags, stylesheet links, and other settings that usually don’t appear directly on the page.
<head>
<title>My Web Page</title>
</head><title>
This sets the page title shown in the browser tab.
<title>Title of your HTML page</title><body>
The <body> contains the visible content of your webpage, such as text, headings, images, buttons, and tables.
<body>The content of your HTML page</body>2) Heading Tags in HTML
Headings help organize a webpage into sections and sub-sections.
HTML provides six heading levels:
<h1>– Main heading<h2>– Sub-heading<h3>– Smaller sub-heading<h4>to<h6>– Lower heading levels
Example:
<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>Use <h1> for the main title of a page and smaller heading tags for sections underneath it.
3) Paragraph and Text Formatting Tags
These tags help you write and style text content.
<p> – Paragraph Tag
Used to create a paragraph of text.
<p>This is an example paragraph.</p><br> – Line Break
Moves text to the next line without starting a new paragraph.
Line one<br>Line two<b> – Bold Text
Makes text bold.
<b>Example</b><i> – Italic Text
Displays text in italic style.
<i>Example</i><u> – Underline Text
Adds an underline to text.
<u>Example</u><strong> – Strong Importance
Used for important text, usually shown in bold.
<strong>Example</strong><em> – Emphasized Text
Adds emphasis, usually shown in italic.
<em>Example</em><small> – Small Text
Displays text in a smaller font size.
<small>Example</small><strike> – Strikethrough Text
Shows a line through text to indicate something removed or outdated.
<strike>Example</strike>4) Link Tag in HTML
<a> – Anchor Tag
The anchor tag is one of the most important HTML tags because it creates clickable links.
Example:
<a href="http://www.domain.com/">Visit Our Site</a>You can use the <a> tag to:
- link one page to another
- open external websites
- link to files
- jump to sections on the same page
5) Image Tag in HTML
<img> – Image Tag
The image tag displays an image on the webpage.
Example:
<img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" />Important attributes used with <img>:
- src – image file path
- width – image width
- height – image height
- alt – alternative text for accessibility and SEO
6) List Tags in HTML
Lists help organize content in bullet or numbered format.
Unordered List – <ul>
Creates a bulleted list.
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>Ordered List – <ol>
Creates a numbered list.
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>List Item – <li>
Represents each item inside a list.
<li>List item 1</li>The HTML tags chart also shows variations of ordered lists such as:
- numbered lists
- lists starting from a custom number
- alphabet lists using
type="a"ortype="A" - Roman numeral lists using
type="i"ortype="I"
7) Table Tags in HTML
Tables are used to display structured data in rows and columns.
<table>
Creates the table structure.
<tr>
Creates a row in the table.
<td>
Creates a normal table cell.
<th>
Creates a table header cell.
Example:
<table border="4" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>Tables are useful for:
- data comparison
- schedules
- result sheets
- structured information display
The chart also includes styled table examples with border color and background color.
8) Form Tags in HTML
Forms are used to collect input from users.
<form>
Creates a form area.
<input>
Creates form fields such as text boxes, buttons, radio buttons, checkboxes, and more.
The HTML chart includes multiple input examples, including:
- simple text input
- styled text field
- image submit button
- textarea comment box
- dropdown select list
- radio buttons and checkboxes
Example:
<form method="post" action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>Forms are essential when building:
- contact pages
- login forms
- registration forms
- surveys
- comment sections
9) Meta Tags in HTML
<meta>
Meta tags provide page information to browsers and search engines.
Examples shown in the chart include:
- description meta tag
- keywords meta tag
- refresh/redirect meta tag
- no-cache meta tag
- robots meta tag
Example:
<meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">Meta tags are important for:
- SEO basics
- page description
- indexing rules
- browser instructions
10) Horizontal Rule and Layout Helper Tags
<hr>
Creates a horizontal line to separate sections.
Example:
<hr width="50%" size="3" />The HTML tags chart also includes several <hr> examples with custom width, color, and size.
<center>
Centers content horizontally. This is an older tag and is mostly replaced by CSS today, but it still appears in older HTML examples.
<center>This will center your contents</center>11) Definition List Tags
HTML also supports definition-style lists.
<dl> – Definition List
<dt> – Definition Term
<dd> – Definition Description
Example:
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>These tags are useful for glossaries, word meanings, FAQs, and term-description layouts.
12) Other Useful HTML Tags from the Chart
The PDF also includes several other tags that beginners should know:
<!-- comment -->– adds comments inside code that do not appear on the webpage<font>– older tag used for font face, size, and color<big>– makes text bigger<tt>– teletype / monospaced text<menu>– creates a menu-style list<option>– creates an option inside a dropdown<embed>– embeds media like audio<link>– links external files such as CSS<marquee>– old scrolling text tag
Some of these are older tags and modern HTML now uses CSS or newer semantic elements instead, but they are still useful to recognize—especially when reading older code examples or basic HTML learning material.
HTML Tags Chart Summary Table
Here is a quick summary of common HTML tags and their use:
| HTML Tag | Use |
|---|---|
<html> |
Root of the HTML document |
<head> |
Stores page information |
<title> |
Sets browser tab title |
<body> |
Contains visible webpage content |
<h1> to <h6> |
Creates headings |
<p> |
Creates a paragraph |
<br> |
Adds a line break |
<a> |
Creates a clickable link |
<img> |
Displays an image |
<ul> |
Creates a bulleted list |
<ol> |
Creates a numbered list |
<li> |
Defines a list item |
<table> |
Creates a table |
<tr> |
Creates a table row |
<td> |
Creates a table data cell |
<th> |
Creates a table heading cell |
<form> |
Creates a form |
<input> |
Creates input fields |
<meta> |
Adds metadata and SEO information |
<hr> |
Draws a horizontal separator line |
Best Way to Learn HTML Tags as a Beginner
If you want to remember HTML tags faster, follow this simple approach:
1. Start with the basic structure tags
Learn <html>, <head>, <title>, and <body> first.
2. Practice text tags
Use headings, paragraphs, bold, italic, and line breaks.
3. Learn links and images next
These are used in almost every webpage.
4. Move to lists and tables
These help you structure information clearly.
5. Practice forms after that
Forms are slightly more advanced but very useful.
6. Write small practice pages
The fastest way to learn HTML is by making tiny pages yourself.
For example, try building:
- a personal bio page
- a simple school project page
- a contact form
- a table of marks
- a list of favorite books or websites
Are All HTML Tags in the Chart Still Used Today?
Not all of them in the same way.
Some tags from older HTML tutorials are still valid for learning, but modern websites often use HTML5 + CSS for better structure and design. For example:
<font>is outdated and CSS is preferred<center>is outdated and CSS alignment is preferred<marquee>is outdated and not recommended for modern sites- styling should generally be handled with CSS instead of old presentational tags
Still, these tags are worth knowing because many beginner tutorials, old templates, and school notes still include them.
FAQs :
1) What are HTML tags in simple words?
HTML tags are instructions written inside angle brackets that tell the browser how to display content on a webpage, such as headings, paragraphs, images, links, and tables.
2) What is the difference between <head> and <body> in HTML?
The <head> section stores information about the page, such as title and meta data, while the <body> contains the visible content shown to users.
3) Which HTML tags should beginners learn first?
Beginners should start with:
<html><head><title><body><h1>to<h3><p><br><a><img><ul>,<ol>,<li>
4) What does the <a> tag do?
The <a> tag creates a clickable hyperlink that can open another page, website, or file.
5) What is the use of the <img> tag?
The <img> tag is used to display an image on a webpage using an image source path.
6) What is the purpose of the <form> tag?
The <form> tag is used to create forms that collect user input such as names, email addresses, comments, and selections.
7) Are tags like <font> and <marquee> still used?
They may still appear in old HTML examples, but modern websites usually use CSS and newer HTML methods instead.
8) Why are meta tags important in HTML?
Meta tags help define page descriptions, keywords, browser instructions, and search engine indexing rules.
9) What is the difference between <ul> and <ol>?
<ul> creates a bulleted list, while <ol> creates a numbered or ordered list.
10) How can I practice HTML tags?
The best way is to create a simple .html file and test different tags one by one in a browser or code editor.
