HTML Tag Examples
To better understand how HTML tags function, let’s look at some common examples that you are likely to use when creating a webpage.
1. <h1> to <h6>: Heading Tags
These tags are used for creating headings. <h1> represents the main heading, which is the most important, and <h6> represents the least important.
<h1>Main Title of the Page</h1>
<h2>Subsection Title</h2>
2. <a>: Anchor Tag
The anchor tag is used to create links to other pages or locations on the same page.
<a href="https://www.example.com">Visit Example</a>
3. <img>: Image Tag
This tag is used to embed images in your web pages.
<img src="image.jpg" alt="Description of image">
4. <ul>, <ol>, <li>: List Tags
These tags are used for making lists. <ul> is an unordered list, <ol> is an ordered list, and <li> is a list item.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
5. <div>: Division Tag
This tag is used to divide your page into sections, which can be styled differently.
<div>
<p>This is a text inside a division.</p>
</div>
Unclosed HTML Tags
In HTML, most tags need to be closed to tell the browser where an element ends. However, some HTML tags are self-closing, meaning they do not need a closing tag. Understanding which tags are self-closing and ensuring proper closure of others is crucial for maintaining the structure and functionality of your web pages.
Self-Closing Tags
These tags include a slash at the end of the tag and do not require a separate closing tag. Here are a few common self-closing HTML tags:
<img>: Used for embedding images.
<img src="logo.png" alt="Company Logo">
<br>: Inserts a line break.
Hello,<br>Welcome to our website!
<hr>: Creates a horizontal line (used for content separation).
<hr>
<input>: Used to create input fields within forms.
<input type="text" name="username">
Issues with Unclosed Tags
When non-self-closing tags are left unclosed, it can lead to unexpected layout issues and errors in how content is displayed. For example, failing to close a <div> tag can affect the entire structure of a webpage, as the browser struggles to determine where the division ends.
To avoid such problems, always ensure that every opening tag has a corresponding closing tag unless it is explicitly a self-closing tag. Properly using and closing your HTML tags will keep your webpage's content organized and displayed correctly.
HTML Meta Tags
HTML meta tags are snippets of text that describe a webpage's content; they don’t appear on the page itself, but only in the page’s code. These tags are essential for search engines and browsers to understand your page's content and purpose, which can influence your site's SEO and how your pages are displayed and interacted with by users.
Common Types of Meta Tags
1. <meta charset="utf-8">
This tag specifies the character encoding for the HTML document, ensuring that all characters on the webpage are displayed correctly.
<meta charset="utf-8">
2. <meta name="description" content="A brief description of the page">
This meta tag provides a short description of the page, which search engines might use as a snippet in search results.
<meta name="description" content="Learn about basic HTML tags and their uses for beginners.">
3. <meta name="keywords" content="HTML, web development, tags">
Although not as influential as it once was, this tag is used to specify keywords for search engines.
<meta name="keywords" content="HTML, web development, tags">
4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag is used to control the layout on mobile browsers. It ensures the page is scaled correctly for different device sizes.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
This tag tells Internet Explorer to use the latest rendering engine available.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
HTML Text Tags
HTML text tags are used to format text on a webpage, providing a way to structure content into headings, paragraphs, and other text-based elements. Understanding these tags is essential for creating readable and well-organized websites.
Common HTML Text Tags
1. <p>: Paragraph Tag
This tag is used to define a block of text as a paragraph.
<p>This is a paragraph of text that might contain various points or ideas related to a single subject.</p>
2. <h1> to <h6>: Heading Tags
These tags are used for defining headings and subheadings, from most important (<h1>) to least important (<h6>).
<h1>Main Heading</h1>
<h2>Subheading</h2>
3. <strong> and <em>: Text Emphasis Tags
<strong> is used to make text bold, indicating it is of high importance, while <em> italicizes text, showing emphasis or a different tone.
<p>I am <strong>really</strong> pleased with the results.</p>
<p>You must <em>never</em> forget to save your work regularly.</p>
4. <br>: Line Break Tag
Used to insert a single line break without creating a new paragraph.
This is the first line.<br>This is the second line.
5. <blockquote>: Blockquote Tag
This tag is used for longer quotes that are taken from another source, helping to distinguish quoted text from other text.
<blockquote>This is a longer block of text that is taken from another source.</blockquote>
6. <pre>: Preformatted Text Tag
When you want your text to appear exactly as written in the HTML code, including spaces and line breaks, use the <pre> tag.
<pre>
Line one
Line two
</pre>
HTML Link Tags
HTML link tags are crucial for navigation and connectivity on the internet, allowing users to jump from one resource to another with a simple click. Understanding how to use these tags is fundamental for any web developer or designer.
Few important HTML Link Tags:
1. <a>: Anchor Tag
The anchor tag is the primary means of creating links in HTML. It can link to another page, a different section of the same page, or to a downloadable file, among other uses.
<a href="https://www.example.com">Visit Example.com</a>
2. Attributes of <a> Tag
-
href: Specifies the URL of the page the link goes to.
-
title: Provides additional information about the link (displayed as a tooltip).
-
target: Defines where to open the linked document (e.g., _blank for a new tab).
<a href="https://www.example.com" title="Go to Example.com" target="_blank">Visit Example.com</a>
3. Linking to a Downloadable File
If you want to link to a file that should be downloaded when clicked, use the download attribute.
<a href="path/to/file.pdf" download="NewFilename.pdf">Download PDF</a>
4. Linking to an Email Address
Using the mailto: scheme, you can create a link that opens the user's email client with a specific address.
<a href="mailto:example@example.com">Send Email</a>
5. Linking to a Specific Part of a Page
You can link to a specific part of a page by using an ID. First, assign an ID to the element you want to link to, then reference that ID in the link.
<!-- This is the target element -->
<p id="section1">Jump to this section.</p>
<!-- This is the link to the section -->
<a href="#section1">Go to Section 1</a>
HTML Image and Object Tags
In HTML, images and objects are embedded into web pages using specific tags. These tags are essential for adding visual content, which can make your site more engaging and informative.
Common Tags for Embedding Images and Objects:
1. <img>: Image Tag
This tag is used to embed an image into a web page. It requires a source file (src) and an alternate text (alt) for accessibility.
<img src="logo.png" alt="Company Logo">
2. <figure> and <figcaption>: Figure and Caption Tags
These tags are used together to provide a container for images and their accompanying captions.
<figure>
<img src="photo.jpg" alt="Landscape Photo">
<figcaption>This is a caption describing the image.</figcaption>
</figure>
3. <object>: Object Tag
The object tag is used to embed different types of multimedia such as audio, video, or even HTML documents.
<object data="movie.swf" width="400" height="400"></object>
4. <embed>: Embed Tag
Used for embedding multimedia like videos, this tag is similar to <object> but does not support nested objects.
<embed src="movie.mp4" width="400" height="300">
5. <svg>: Scalable Vector Graphics
This tag embeds vector-based graphics in HTML, which can scale better at different screen resolutions without losing quality.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
HTML List Tags
HTML provides several tags for creating lists, which are crucial for organizing data in a structured format on web pages. Lists make information easier to read and understand, and they can be styled in various ways to suit the design of your website.
Common Types of Lists in HTML
1. <ul>: Unordered List
This tag is used to create a list of items that do not need to be in any particular order. Each item in the list is marked with a bullet point by default.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
2. <ol>: Ordered List
An ordered list is used when the sequence of the items is important. Items in an ordered list are automatically numbered by the browser.
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
3. <li>: List Item Tag
This tag is used within <ul> or <ol> to define each item in the list.
4. <dl>, <dt>, and <dd>: Description List
Description lists are used to display terms and their corresponding descriptions.
<dl>
<dt>Coffee</dt>
<dd>A hot drink made from the roasted and ground seeds of a tropical shrub.</dd>
<dt>Milk</dt>
<dd>A white fluid rich in fat and protein, secreted by female mammals for the nourishment of their young.</dd>
</dl>
Note -: Lists are versatile tools in HTML that help present data logically and clearly, improving the user's ability to navigate and understand the content.
HTML Table Tags
HTML tables allow you to organize data into rows and columns, making it easy to display information like schedules, statistics, or other tabular data on a web page. Understanding how to use table tags effectively is important for creating clear and readable content.
Key Components of HTML Tables
1. <table>: Table Container
This tag defines the overall table structure. It acts as a container for all other table-related tags.
<table>
<!-- Table rows and cells go here -->
</table>
2. <tr>: Table Row
Each <tr> tag represents a single row in the table.
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
3. <th>: Table Header
The <th> tag is used for column headers to denote titles of columns. Text within <th> is usually bold and centered by default.
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
4. <td>: Table Data
This tag is used for standard cells in the table that contain data.
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
5. <caption>: Table Caption
A <caption> provides a title or summary for the table, which is typically displayed above the table content.
<table>
<caption>Monthly Sales Report</caption>
<tr>
<th>Product</th>
<th>Sales</th>
</tr>
<tr>
<td>Product 1</td>
<td>100 units</td>
</tr>
</table>
HTML Form Tags
HTML forms are essential for collecting user input on websites. Whether it's a login box, a survey, or a registration form, understanding how to use HTML form tags is crucial for engaging with site visitors effectively.
Overview of Key HTML Form Tags
1. <form>: Form Container
This tag acts as a container for all elements within a form. It can specify the method of data submission (GET or POST) and the action to be taken when the form is submitted.
<form action="/submit-form" method="post">
<!-- Form elements like input, textarea go here -->
</form>
2. <input>: Input Field
This versatile tag is used for creating various types of input elements, such as text fields, checkboxes, and radio buttons.
<!-- Text input -->
<input type="text" name="username">
<!-- Checkbox -->
<input type="checkbox" name="subscribe" value="Yes" checked>
<!-- Radio button -->
<input type="radio" name="gender" value="male">
3. <label>: Label for an Input
Labels are associated with input elements to provide clearer descriptions. Each label should refer to a specific input element using the for attribute.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
4. <textarea>: Textarea Field
Used for multi-line text input, such as a comment box or address field.
<textarea name="message" rows="4" cols="50">
Please enter your message here...
</textarea>
5. <button>: Button Element
Buttons are used within forms to submit data to a server or trigger a certain type of interaction.
<button type="submit">Submit</button>
6. <select> and <option>: Dropdown List
These tags are used together to provide a drop-down list that users can select from.
<select name="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
HTML Scripting Tags
HTML scripting tags allow you to include dynamic script and data blocks in your web pages, which are crucial for adding interactive functions like animations, form validation, or loading external data. Understanding how to utilize these tags properly can significantly enhance the interactivity and functionality of your websites.
Key Scripting Tags in HTML
1. <script>: The Script Tag
This tag is used to embed or refer to executable script code, usually JavaScript, within HTML documents. It can be placed in the <head> or <body> section of your HTML, depending on when you want the script to load.
<script>
console.log('Hello, world!');
</script>
2. External Scripts
Instead of embedding the code directly, you can also link to external JavaScript files. This is beneficial for reusing scripts across multiple pages or loading libraries from a server.
<script src="script.js"></script>
3. <noscript>: Noscript Tag
This tag is used to define an alternative content (like a text message) for users whose browsers do not support JavaScript, or have scripting disabled. It ensures that users still receive necessary information even if scripts do not run.
<noscript>Your browser does not support JavaScript!</noscript>
HTML Tags List
HTML consists of numerous tags, each serving distinct purposes to build and structure web content. Below is a comprehensive list of some commonly used HTML tags along with their descriptions to help you understand their usage and functionalities.
1. <html>: This tag encloses the entire HTML document and primarily tells the browser that this is an HTML5 document.
2. <head>: Contains metadata about the HTML document, including title, links to stylesheets, and scripts.
3. <title>: Specifies the title of the web page, which is displayed in the browser's title bar or tab.
4. <body>: Encloses all the contents of an HTML document, such as text, hyperlinks, images, tables, and lists.
5. <header>: Represents a container for introductory content or navigational links.
6. <footer>: Defines the footer for a document or section, often containing copyright and contact information.
7. <main>: Specifies the main content of the document.
8. <section>: Defines a section in a document, such as chapters, headers, footers, or any other sections of the document.
9. <article>: Specifies independent, self-contained content.
10. <aside>: Represents a portion of a document whose content is only indirectly related to the document's main content.
11. <nav>: Defines navigation links.
12. <div>: Acts as a container for other HTML elements and is often used for styling or grouping elements.
13. <span>: A generic inline container for phrasing content, which does not inherently represent anything.
14. <h1> to <h6>: Define HTML headings; <h1> is the highest (or most important) level and <h6> the least.
15. <p>: Denotes a paragraph.
16. <ul>: Unordered list that groups a collection of items having no numerical order.
17. <ol>: Ordered list that groups a list of items in a specific order.
18. <li>: Represents an item in a list.
19. <table>: Defines a table.
20. <tr>: Table row.
21. <th>: Table header.
22. <td>: Table data cell.
23. <form>: Defines an HTML form for user input.
24. <input>: Defines an input control.
25. <label>: Defines a label for an <input> element.
26. <textarea>: Defines a multi-line text input control.
27. <button>: Represents a clickable button.
28. <select>: Creates a drop-down list.
29. <option>: Defines an option in a drop-down list.
30. <link>: Defines the relationship between the current document and an external resource.
31. <meta>: Provides metadata about the HTML document.
32. <script>: Defines a client-side script.
33. <style>: Contains style information for a document.
Note -: This list represents only a selection of HTML tags, but they are among the most frequently used and are essential for the construction of any webpage.
Frequently Asked Questions
What is the difference between <div> and <span> tags?
<div> is a block-level element used for grouping larger chunks of code, while <span> is an inline element used for small portions of HTML within a line. <div> usually breaks the flow with a new line, whereas <span> does not.
When should I use <article> versus <section> tags?
Use <article> for self-contained, independent content that can be distributed separately, like blog posts or news articles. <section> is used to group thematically related content within a document, which might not stand alone.
How do I choose between <ul>, <ol>, and <dl> for lists?
Use <ul> for an unordered list without any particular sequence, <ol> for an ordered list where sequence matters, and <dl> for a description list, which is ideal for pairs like terms and descriptions.
Conclusion
In this article, we have learned about the basics of HTML tags, starting from simple syntax, then we talked about specific tag with examples for text, links, images, lists, tables, forms, and scripting. We also discussed a comprehensive list of common HTML tags, providing a better understanding for beginners to understand how to structure and style web pages effectively.
You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure andAlgorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry.