HTML Tags

Learn the most commonly used HTML tags, their syntax, purpose, examples, and expected results.

What are HTML Tags?

HTML tags are special keywords enclosed inside angle brackets that are used to define HTML elements.

Tags tell the browser what type of content an element represents, such as a heading, paragraph, link, image, list, table, or form.

Basic Example:

<p>Hello World</p>

Basic Tag Structure

<tagname>Content</tagname>

Part	Example	Purpose
Opening Tag	`<p>`	Starts the HTML element.
Content	`Hello World`	The actual content of the element.
Closing Tag	`</p>`	Ends the HTML element.

Types of HTML Tags

Paired Tags

These normally have an opening tag and a closing tag.

<p>
    Hello
</p>

Void Elements

These do not contain content and do not require a separate closing tag.

<br>
<hr>
<img>

Document Structure Tags

Tag	Syntax	Explanation	Output / Result
`<!DOCTYPE html>`	`<!DOCTYPE html>`	Declares the document as HTML.	Helps the browser use standards mode.
`<html>`	`<html>...</html>`	Root element of the document.	Contains the complete HTML document.
`<head>`	`<head>...</head>`	Contains metadata and resource information.	Usually not visible as normal page content.
`<title>`	`<title>My Page</title>`	Defines the document title.	Appears in the browser tab.
`<body>`	`<body>...</body>`	Contains the visible page content.	Displays the main web page content.

Text and Heading Tags

Tag	Syntax	Explanation	Output / Result
`<h1>`	`<h1>Main Heading</h1>`	Creates the highest-level heading.	Large main heading.
`<h2>`	`<h2>Section</h2>`	Creates a second-level heading.	Section heading.
`<h3>`	`<h3>Subsection</h3>`	Creates a third-level heading.	Subsection heading.
`<h4>`	`<h4>Topic</h4>`	Creates a fourth-level heading.	Lower-level heading.
`<h5>`	`<h5>Subtopic</h5>`	Creates a fifth-level heading.	Smaller heading.
`<h6>`	`<h6>Note</h6>`	Creates the lowest heading level.	Smallest heading level.
`<p>`	`<p>Hello</p>`	Creates a paragraph.	Displays paragraph text.
`<br>`	`Hello<br>World`	Inserts a line break.	Text moves to a new line.
`<hr>`	`<hr>`	Creates a thematic break.	Browser commonly displays a horizontal line.

Text Formatting Tags

Tag	Syntax	Explanation	Output / Result
`<strong>`	`<strong>Important</strong>`	Gives strong importance to content.	Important
`<em>`	`<em>Important</em>`	Gives emphasis to content.	Important
`<b>`	`<b>Bold Text</b>`	Presents text in bold.	Bold Text
`<i>`	`<i>Italic Text</i>`	Presents text in an italic style.	Italic Text
`<mark>`	`<mark>Highlighted</mark>`	Highlights text.	Highlighted
`<small>`	`<small>Small Text</small>`	Represents side comments or small print.	Small Text

Links and Image Tags

Tag	Syntax	Explanation	Output / Result
`<a>`	`<a href="#">Learn More</a>`	Creates a hyperlink.	Learn More
`<img>`	`<img src="image.jpg" alt="Image">`	Displays an image.	Displays the specified image resource.
`<figure>`	`<figure>...</figure>`	Represents self-contained content.	Groups image or media content.
`<figcaption>`	`<figcaption>Caption</figcaption>`	Defines a caption for a figure.	Displays the figure caption.

List Tags

Tag	Syntax	Explanation	Output / Result
`<ul>`	`<ul>...</ul>`	Creates an unordered list.	Usually displays bullet points.
`<ol>`	`<ol>...</ol>`	Creates an ordered list.	Usually displays numbered items.
`<li>`	`<li>Item</li>`	Defines a list item.	Displays one item inside a list.
`<dl>`	`<dl>...</dl>`	Creates a description list.	Groups terms and their descriptions.
`<dt>`	`<dt>HTML</dt>`	Defines a term in a description list.	Displays the term.
`<dd>`	`<dd>Markup Language</dd>`	Defines the description of a term.	Displays the term description.

Table Tags

Tag	Syntax	Explanation	Output / Result
`<table>`	`<table>...</table>`	Creates a table.	Displays table structure.
`<tr>`	`<tr>...</tr>`	Defines a table row.	Creates one table row.
`<th>`	`<th>Name</th>`	Defines a table header cell.	Displays header content.
`<td>`	`<td>John</td>`	Defines a table data cell.	Displays data inside the table.
`<thead>`	`<thead>...</thead>`	Groups table header rows.	Represents the header section.
`<tbody>`	`<tbody>...</tbody>`	Groups table body rows.	Represents the main data section.

Form Tags

Tag	Syntax	Explanation	Output / Result
`<form>`	`<form>...</form>`	Creates a form.	Groups form controls.
`<label>`	`<label>Name</label>`	Defines a label for a form control.	Displays descriptive label text.
`<input>`	`<input type="text">`	Creates an input control.	Displays an input field.
`<textarea>`	`<textarea>...</textarea>`	Creates a multi-line text input.	Displays a text area.
`<select>`	`<select>...</select>`	Creates a selection control.	Displays a drop-down list.
`<option>`	`<option>Java</option>`	Defines an option inside a select.	Displays one selectable option.
`<button>`	`<button>Submit</button>`	Creates a button.	Displays a clickable button.

Container and Semantic Tags

Tag	Syntax	Explanation	Output / Result
`<div>`	`<div>Content</div>`	Generic block container.	Groups block-level content.
`<span>`	`<span>Text</span>`	Generic inline container.	Groups inline content.
`<header>`	`<header>...</header>`	Represents introductory content.	Defines a header section.
`<nav>`	`<nav>...</nav>`	Represents navigation links.	Defines a navigation area.
`<main>`	`<main>...</main>`	Represents the main page content.	Defines the main content area.
`<section>`	`<section>...</section>`	Represents a thematic section.	Groups related content.
`<article>`	`<article>...</article>`	Represents self-contained content.	Defines independent content.
`<aside>`	`<aside>...</aside>`	Represents related side content.	Defines supplementary content.
`<footer>`	`<footer>...</footer>`	Represents footer content.	Defines a footer section.

Media Tags

Tag	Syntax	Explanation	Output / Result
`<audio>`	`<audio controls>...</audio>`	Embeds audio content.	Displays an audio player when a valid source is supplied.
`<video>`	`<video controls>...</video>`	Embeds video content.	Displays a video player when a valid source is supplied.
`<iframe>`	`<iframe src="..."></iframe>`	Embeds another resource or document.	Displays the embedded resource when permitted.

Complete HTML Tags Example

<!DOCTYPE html>

<html>

<head>

    <title>
        HTML Tags Example
    </title>

</head>

<body>

    <header>

        <h1>
            CIIT Institute
        </h1>

    </header>

    <main>

        <section>

            <h2>
                Learn HTML
            </h2>

            <p>
                HTML provides the structure of a web page.
            </p>

            <a href="#">
                Learn More
            </a>

        </section>

        <hr>

        <section>

            <h2>
                Topics
            </h2>

            <ul>

                <li>
                    HTML Elements
                </li>

                <li>
                    HTML Attributes
                </li>

            </ul>

        </section>

    </main>

    <footer>

        <p>
            CIIT Institute
        </p>

    </footer>

</body>

</html>

Output / Result

CIIT Institute

Learn HTML

HTML provides the structure of a web page.

Learn More

Topics

HTML Elements
HTML Attributes

Important Points

HTML tags define the structure and meaning of content.
Many HTML elements use opening and closing tags.
Void elements do not need closing tags.
Attributes provide additional information about elements.
Semantic tags help describe the purpose of page sections.

Practice Exercise

Create an HTML page using <html>, <head>, and <body>.
Add headings and paragraphs.
Add a hyperlink.
Create an unordered list.
Add a table.
Add a form with an input and button.
Organize the page using semantic elements.

Master HTML From Scratch