HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
HTML Tags
If you’re interested in building visually appealing and well-structured websites, understanding HTML tags in absolutely essential. Tags are the core building blocks of any HTML document.
What is an HTML Tag?
An HTML tag acts like a label or container that tells the browser how to display and structure content on a webpage. It’s a piece of code written inside angle brackets < >.
For example, <p> is used to define a paragraph, and <h1> defines a large heading.
Tags can surround text, images, links, or even other tags, and they help in organizing content meaningfully.
Commonly Used HTML Tags
Although HTML have over 100 tags, most websites use only a small portion frequently. Below is a categorized list of the most commonly used HTML tags, which together cover around 70% of real-world web development scenarios.
Document Structure Tags
These tags define the overall structure of a web page.
<!DOCTYPE html>– Declares the document type and HTML version.<html>– Wraps the entire HTML document.<head>– Contains metadata, links to stylesheets, and scripts.<body>– Holds the visible content of the web page.
Metadata Tags
Used to define information about the page, often for search engines or browser configuration.
<title>– Sets the title shown in the browser tab.<meta>– Provides metadata like author name, keywords, and viewport settings.<links>– Connects external files, such as CSS stylesheets.
Text Formatting Tags
These tags structure and style text content.
<p>– Paragraph<h1>to<h6>– Headings from largest (<h1>) to smallest (<h6>)<strong>– Bold text for emphasis<em>– Italic text for emphasis<br>– Line break<hr>– Horizontal line (used to separate content)
List Tags
Used to create organized lists.
<ul>– Unordered (bulleted) list<ol>– Ordered (numbered) list<li>– List item
Hyperlink and Media Tags
For adding links, images, and media.
<a>– Anchor tag for hyperlinks<img>– Displays an image<audio>– Embeds audio files<video>– Embeds video content
Form Tags
These tags allow user to input and submit information.
<form>– Creates a from<input>– User input field (text, checkbox, radio, etc.)<textarea>– Multi-line text input<button>– Clickable button<select>– Drop-down list<option>– Options with a<select>menu
Table Tags
Used to display data in rows and columns.
<table>– Creates a table<tr>– Table row<td>– Table data cell<th>– Table header cell<thead>,<tbody>,<tfoot>– Groups for table sections
Semantic Tags
Semantic tags describe the role of the content, improving both readability and accessibility.
<header>– Defines the page header<footer>– Defines the page footer<article>– Represents an independent piece of content<section>– Groups related content<nav>– Navigation links<aside>– Sidebar or tangential content
Paired and Unpaired Tags
HTML tags are generally categorized into paired and unpaired (self-closing) tags۔
1. Paired Tags (Container Tags)
These tags always come in pairs: an opening tag and a closing tag. The content goes in between.
Format:
- Opening tag:
<tagname> - Closing tag:
</tagname>
Examples:
- Paragraph:
<p>This is a paragraph.</p> - Heading:
<h1>Main Heading</h1>
2. Unpaired Tags (Self-Closing Tags)
These tags don’t have a separate closing tag. They are self-contained.
Format:
<tagname/>or<tagname>(in HTML5, both are acceptable)
Examples:
- Line break:
<br> - Horizontal rule:
<hr> - Image:
<img src="image.jpg" alt="An example image">
Note: In frameworks like React or Next.js, you’ll always need to close self-closing tags like <br/> and <img/> with a slash at the end. It’s a good habit to start using now!
Summary
HTML tags are the foundation of every webpage. They provide the structure and tell browser how to display content. Although there are many tags, mastering the commonly used one will cover most of your needs. Whether you’re adding text, images, links, or forms, there’s a tag for everything.