In this chapter, you'll learn everything you need to know about HTML tags, including how to use them, their syntax, and some basic tag examples. Don't worry—using HTML tags is very simple!
What is HTML Tag?
An HTML tag is a core command used to create webpage elements.
Every tag has its own purpose. For example,
The <h1> tag is used to define the main heading of a webpage.
The <p> tag is used to create paragraphs.
The <img> tag is used to display images.
The <a> tag is used to create hyperlinks.
Tags are enclosed in angle brackets (< >).
Most of the HTML tags come in pairs called paired/double tags.
Some tags come without the closing tag called self-closing/single tags.
✅ Paired/Double tags:
Paired/Double tags have both an opening and a closing tag, with content placed between them. They are used for elements that contain text, images, or other nested elements.
Syntax:
<tagname>Some Content Here</tagname>
Example:
<p>This is a Paragraph.</p>
Example Explained:
<p> is the start/opening tag of the paragraph element.
This is a Paragraph. is the content of the paragraph element.
</p> is the end/closing tag of the paragraph element.
Try It Yourself:
Note:
Always include the end/closing tag. Skipping it can cause unexpected behavior, as the browser might misinterpret the document structure. This can affect how your content is displayed on the page.
✅ Self-closing/Single tags:
Single tags are self-contained and do not require a closing tag. They represent void elements, which do not contain any content, or are used to insert standalone items, such as images or line breaks.
Syntax:
<tagname>
Examples:
<img>: Embeds an image.
<br>: Inserts a line break.
<hr>: Creates a horizontal rule.
Try It Yourself:
HTML Headings (<h1> to <h6>)
<h1> to <h6> tags define HTML headings.
<h1> defines the largest and most important heading. Use <h1> for the main heading.
<h6> defines the smallest and least important heading.
Example:
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>This is a Smaller Heading</h3>
Try It yourself
Note:
Always remember to close heading tags properly. This ensures that the HTML is well-formed and avoids any rendering issues.
Good: <h1>My Heading</h1>Bad: <h1>My Heading
HTML Paragraphs (<p>)
<p> tag defines HTML Paragraphs. It used to create blocks of text on webpage.
Example:
<p>This is a Paragraph.</p>
<p>This is another Paragraph.</p>
Try It yourself
HTML Links (<a>)
<a> creates clickable hyperlinks. Hyperlinks let you navigate one page to another page or one website to another website.
Syntax:
<a href="Destination/URL">Link Text</a>
Example:
<a href="https://w3studies.com">W3Studies</a>
Try It Yourself
Explanation of <a> tag
The <a> tag used to define a hyperlink on webpage
It is a container/paired tag, meaning it has an opening (<a>) tag, a closing (</a>) tag and content (link text) placed in between.
href Attribute:
href stands for hyperlink reference.
A required attribute that specifies the URL or destination of the link.
Link Text:
The text between the <a> and </a> tags (in this case, "W3Studies") is the clickable part of the link that users see.
The Images (<img>)
The <img> tag in HTML is used to display images on a webpage. It is a self-closing tag, meaning it doesn’t require a closing tag.
Syntax:
<img src="image_url" alt="alternative text if image doesn’t load">
Example:
<img src="boy_image.jpg" alt="The Cute Boy">
Explanation of Attributes:
src (Source): Specifies the location of the image file (URL or file path) to be displayed.
alt (Alternative Text): Provides descriptive text for accessibility or when the image cannot load.
Try It Yourself
HTML Lists
HTML lists are used to present a group of items, and they come in two main types: unordered lists (bulleted) and ordered lists (numbered).
✅ Unordered List (<ul>):
An unordered list is used when the order of the items does not matter, and each item is represented by a bullet point.
Example
<ul> <li>Apple</li>
<li>Banana</li>
<li>Orange</li> </ul>
Explanation
<ul>: Defines the unordered list.
<li>: Defines each list item.
Try It Yourself
✅ Ordered List (<ol>):
Ordered lists are used when you need to display items in a specific order, with each item numbered.
Example
<ol> <li>Yellow</li>
<li>Red</li>
<li>Green</li> </ol>
Explanation
<ol>: Defines the Ordered list.
<li>: Defines each list item.
