Html Tags And Attributes Complete Guide
Last Update:2025-06-23T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.
12 mins read
Difficulty-Level: beginner
Understanding the Core Concepts of HTML Tags and Attributes
HTML Tags and Attributes: Explained in Detail with Important Information
HTML Tags
HTML tags are used to mark up the beginning and end of HTML elements. They are enclosed within angle brackets <>, and most include a closing tag indicated by the slash at the beginning of the end tag, such as <tagname> and </tagname>. Here are some essential HTML tags:
Document Structure Tags
<!DOCTYPE html>: Declares the document type and version of HTML.<html>: The root element of an HTML page.<head>: Container for meta-information about the document, such as the title, linked stylesheets, scripts, and character set.<title>: Sets the title of the web page, which appears in the browser tab.<body>: Contains the visible content of the web page.
Text Tags
<h1>to<h6>: Header tags used to define headings of different levels.<p>: Paragraph tag used for regular text.<br>: Line break tag that creates a space between lines of text.<hr>: Horizontal rule tag that inserts a thematic break between paragraphs.
Formatting Tags
<b>or<strong>: Bold tag to make text bold.<i>or<em>: Italic tag to make text italicized.<u>: Underline tag to underline text. (Not recommended for emphasis; use CSS for styling).<mark>: Mark tag to highlight text, often used for search results.<sub>and<sup>: Subscript and superscript tags for mathematical expressions or footnotes.
Link and Hypermedia Tags
<a>: Anchor tag used to create hyperlinks to other web pages, parts of the page, or other file types.<img>: Image tag used to embed images in the web page.<video>and<audio>: Media tags to embed video and audio files.
List Tags
<ul>: Unordered list tag used for lists where the order of elements is not important.<ol>: Ordered list tag used for lists where the order of elements is important.<li>: List item tag used within<ul>or<ol>to represent each list item.
Table Tags
<table>: Table tag used to create tables.<tr>: Table row tag used to define a row in a table.<th>: Table header cell tag used for table headers.<td>: Table data cell tag used for data cells in a table.<caption>: Table caption tag used to add a title to a table.
Semantic Tags
<header>: Header tag used to contain introductory content or navigational links.<nav>: Navigation tag used to link to other parts of the site.<main>: Main tag used to wrap the dominant content of the document.<section>: Section tag used to break the document into logical sections.<article>: Article tag used to represent self-contained content.<aside>: Aside tag used for content tangentially related to the main content.<footer>: Footer tag used to contain information about the author, copyright, and links.
HTML Attributes
HTML attributes are additional pieces of information added to HTML tags. They specify the characteristics or behavior of the tags and come in the form of name-value pairs within the opening tag. The following are some important HTML attributes:
Global Attributes
id: Used to provide a unique identifier for an element.class: Used to categorize an element for styling purposes.style: Used to apply CSS rules to an element directly.title: Provides additional information about an element, displayed as a tooltip when the element is hovered over.hidden: A boolean attribute that hides an element from view.
Specific Attributes
href(for<a>tag): Specifies the URL of the page the link goes to.src(for<img>,<video>,<audio>tags): Specifies the source URL of the file to be embedded.alt(for<img>tag): Provides alternative text for an image if it cannot be displayed.target(for<a>and<form>tags): Specifies where to open the linked URL (e.g.,_blankopens the link in a new tab).action(for<form>tag): Specifies where to send the form data upon submission.method(for<form>tag): Specifies the HTTP method to use when sending form data (GETorPOST).type(for<input>and<button>tags): Specifies the type of input or button (e.g.,text,password,submit,reset,button).placeholder(for<input>and<textarea>tags): Provides a hint to the user of what to enter in the input field.required(for<input>and<textarea>tags): A boolean attribute that makes the input field a mandatory field before the form can be submitted.
Online Code run
Step-by-Step Guide: How to Implement HTML Tags and Attributes
HTML Tags and Attributes: A Beginner’s Guide
HTML (Hypertext Markup Language) is the standard markup language used to create and design web pages. It uses tags to describe the structure and content of a web document. Attributes provide additional information about HTML elements.
Step 1: Understanding HTML Tags
Definition:
- HTML Tags are used to define the structure of an HTML document.
- Tags are enclosed within angle brackets (
<>). - Most tags come in pairs, with an opening tag and a closing tag. The closing tag includes a forward slash (
/) before the tag name.
Example:
<!DOCTYPE html>- Declares the document type and version of HTML.<html>- The root element of an HTML page.<head>- Contains meta-information about the document.<title>- Specifies the title of the document, which appears in the browser tab.<body>- Contains the content of the HTML document.<p>- Defines a paragraph.<a>- Defines a hyperlink.<img>- Embeds an image.
Step 2: Writing a Basic HTML Page
Let’s create a simple HTML document to illustrate the use of tags.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my very first HTML page!</p>
<a href="https://www.example.com">Visit Example</a>
<img src="image.png" alt="Sample Image">
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares that this document is an HTML5 document.<html>: The root element of the HTML document.<head>: Contains meta-information about the document.<title>: Sets the title of the page (visible in the browser tab).<body>: Contains the content of the page that is visible to the user.<h1>: Defines a top-level heading.<p>: Defines a paragraph of text.<a>: Creates a hyperlink to another webpage or resource.<img>: Embeds an image in the document.
Step 3: Introduction to HTML Attributes
Definition:
- Attributes provide additional information about HTML elements.
- Attributes are added within the opening tag.
- Attributes come in name/value pairs, with the name and value separated by an equal sign (
=). - Attribute values should always be enclosed in quotes (either single or double).
Common Attributes:
href: Used with the<a>tag to specify the link's destination.src: Used with the<img>tag to specify the image's source file.alt: Used with the<img>tag to provide alternative text for the image.id: Used to uniquely identify an element.class: Used to assign one or more class names to an element.style: Used to add CSS styles to an element.title: Provides additional information about an element (tooltip).lang: Specifies the language of the element or document.
Step 4: Adding Attributes to HTML Elements
Let’s modify the previous example to include attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1 id="main-heading" title="Welcome Heading">Welcome to My Website</h1>
<p class="intro">This is my very first HTML page!</p>
<a href="https://www.example.com" rel="noopener noreferrer" target="_blank">Visit Example</a>
<img src="image.png" alt="Sample Image" title="A sample image">
</body>
</html>
Explanation:
<html lang="en">: Specifies that the document is in English.<h1 id="main-heading"...>: Adds an ID to the heading for easier styling or scripting.<h1 ... title="Welcome Heading">: Provides a tooltip when the mouse hovers over the heading.<p class="intro">: Assigns a class named "intro" to the paragraph.<a ... rel="noopener noreferrer" target="_blank">: Opens the link in a new tab and prevents security issues.<img ... title="A sample image">: Provides a tooltip for the image.
Step 5: Using Multiple Classes and Styles
Let’s add more attributes to demonstrate their use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
<style>
.intro {
font-size: 18px;
color: blue;
}
#main-heading {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1 id="main-heading" title="Welcome Heading">Welcome to My Website</h1>
<p class="intro important">This is my very first HTML page!</p>
<a href="https://www.example.com" rel="noopener noreferrer" target="_blank" style="color:red;">Visit Example</a>
<img src="image.png" alt="Sample Image" title="A sample image">
</body>
</html>
Explanation:
<meta charset="UTF-8">: Specifies the character encoding for the document.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive and displays correctly on all devices.<style>: Contains CSS that styles elements with specific classes or IDs.<h1 id="main-heading"...>: Uses an ID to apply styles to the heading.<p class="intro important">: Adds multiple classes to the paragraph (separated by spaces).<a ... style="color:red;">: Uses an inline style to change the color of the link.
Step 6: Creating a Nested HTML Structure
HTML elements can be nested within each other to create complex structures.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
<style>
.section {
margin-bottom: 20px;
}
.highlight {
color: red;
}
</style>
</head>
<body>
<div id="header" class="section">
<h1 id="main-heading" title="Welcome Heading">Welcome to My Website</h1>
</div>
<div id="content" class="section">
<h2>About This Page</h2>
<p class="intro">This is my very first HTML page!</p>
<p>It contains <span class="highlight">nested elements</span> and <a href="https://www.example.com" rel="noopener noreferrer" target="_blank">links</a>.</p>
</div>
<div id="footer" class="section">
<p>© 2023 My Website</p>
</div>
</body>
</html>
Explanation:
<div>: A block-level container for other elements.id="header": A unique identifier for the header section.class="section": A class assigned to multiple sections for styling.<span>: An inline container for text within a block element.
Step 7: Adding a List to the HTML Document
HTML provides several tags to create lists, such as ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
<style>
.section {
margin-bottom: 20px;
}
.highlight {
color: red;
}
</style>
</head>
<body>
<div id="header" class="section">
<h1 id="main-heading" title="Welcome Heading">Welcome to My Website</h1>
</div>
<div id="content" class="section">
<h2>About This Page</h2>
<p class="intro">This is my very first HTML page!</p>
<p>It contains nested elements, links, and lists.</p>
<ul>
<li class="highlight">HTML Tags</li>
<li>HTML Attributes</li>
<li>Lists</li>
</ul>
</div>
<div id="footer" class="section">
<p>© 2023 My Website</p>
</div>
</body>
</html>
Explanation:
<ul>: Creates an unordered list (bulleted list).<li>: Defines a list item within the<ul>.
Step 8: Adding a Table to the HTML Document
Tables are used to organize data in rows and columns using the <table>, <tr>, <th>, and <td> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
<style>
.section {
margin-bottom: 20px;
}
.highlight {
color: red;
}
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="header" class="section">
<h1 id="main-heading" title="Welcome Heading">Welcome to My Website</h1>
</div>
<div id="content" class="section">
<h2>About This Page</h2>
<p class="intro">This is my very first HTML page!</p>
<p>It contains nested elements, links, lists, and tables.</p>
<ul>
<li class="highlight">HTML Tags</li>
<li>HTML Attributes</li>
<li>Lists</li>
<li>Tables</li>
</ul>
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Fresh red apple</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>Ripe banana</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<div id="footer" class="section">
<p>© 2023 My Website</p>
</div>
</body>
</html>
Explanation:
<table>: Creates a table.<thead>: Contains the header row of the table.<tr>: Defines a table row.<th>: Defines a header cell in a table.<tbody>: Contains the body rows of the table.<td>: Defines a standard data cell in a table.
Step 9: Adding a Form to the HTML Document
Forms are used to collect user input with the help of various input elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
<style>
.section {
margin-bottom: 20px;
}
.highlight {
color: red;
}
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="header" class="section">
<h1 id="main-heading" title="Welcome Heading">Welcome to My Website</h1>
</div>
<div id="content" class="section">
<h2>About This Page</h2>
<p class="intro">This is my very first HTML page!</p>
<p>It contains nested elements, links, lists, tables, and forms.</p>
<ul>
<li class="highlight">HTML Tags</li>
<li>HTML Attributes</li>
<li>Lists</li>
<li>Tables</li>
<li>Forms</li>
</ul>
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Fresh red apple</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>Ripe banana</td>
<td>20</td>
</tr>
</tbody>
</table>
<h2>Contact Us</h2>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
<div id="footer" class="section">
<p>© 2023 My Website</p>
</div>
</body>
</html>
Explanation:
<form>: Creates a form for user input.action="/submit-form": Specifies the URL where the form data will be sent.method="post": Specifies the HTTP method to use when sending form data.<label>: Provides a label for each input element, improving accessibility.<input type="text">: Creates a text input field.<input type="email">: Creates an email input field that validates the entered email format.<textarea>: Creates a multi-line text input area.<input type="submit">: Creates a submit button to send the form data.
Summary
- HTML Tags define the structure and content of an HTML document.
- Attributes provide additional information about HTML elements.
- Tags are enclosed in angle brackets (
<>). - Attributes are added within the opening tag in name-value pairs.
- Common attributes include
href,src,alt,id,class,style, andtitle. - Nested elements allow for complex HTML structures.
- Forms are used to collect user input with various input elements.
Top 10 Interview Questions & Answers on HTML Tags and Attributes
1. What is a Tag in HTML?
Answer:
In HTML, a tag is an element that defines the structure and format of content on a web page. Tags are enclosed within angle brackets < >. For example, <h1> defines a top-level heading, and <p> defines a paragraph.
2. How do you differentiate between opening, closing, and self-closing tags in HTML?
Answer:
- Opening Tags: These denote the beginning of an HTML element. They start with
<followed by the tag name and end with>. For example:<p>. - Closing Tags: These denote the end of an HTML element and are similar to opening tags but prefixed by a forward slash
/. For example:</p>. - Self-Closing (Void) Tags: These are elements that don’t have closing tags because they don’t enclose any other content or tags within them. For example:
<br/>and<img/>.
3. Can all HTML tags have attributes?
Answer:
No, not all HTML tags can have attributes. While many tags do use attributes to provide more information, certain void (self-closing) tags like <br>, <hr>, and <img> cannot contain content inside them and may only have attributes.
4. Explain how the id attribute is different from the class attribute in HTML?
Answer:
idattribute: Each element can have one uniqueidper document. It is used to identify single elements uniquely and is often utilized in CSS styling or JavaScript for manipulating specific elements.classattribute: An element can have multiple classes separated by spaces. Classes are typically used to assign styles to multiple elements with the same class name; also useful for grouping elements together for JavaScript operations.
5. What does the href attribute in the tag stand for? How is it used?
Answer:
The href attribute stands for "hypertext reference." In the <a> tag (anchor tag), it specifies the URL (web address) where you want to direct the user when the link is clicked. Example: <a href="https://www.example.com">Visit Example</a>.
6. How do you use the src attribute in an image tag to display an image?
Answer:
The src attribute in the <img> tag specifies the path to the image file you wish to display on the webpage. You provide a URL either as an absolute path or a relative path. For example:
<img src="images/photo.jpg" alt="A beautiful photo">
This code tells the browser to load an image located in the "images" folder named "photo.jpg".
7. What is the purpose of the alt attribute used with the ![]()
tag?
Answer:
The alt attribute of an <img> tag stands for alternate text which provides a description of the image. This is primarily useful for accessibility, allowing screen readers to read out the description of an image to visually impaired users. Additionally, if the image fails to load due to network issues or other reasons, the alt text appears instead.
8. How can you use the rel attribute in a link tag to control the relationship between linked documents?
Answer:
The rel attribute in the <link> tag specifies the relationship between the current document and the document being linked to. Common values include:
stylesheetfor linking CSS files.noopenerandnoreferrerfor security purposes when using target links that open new tabs.canonicalfor duplicate content prevention by indicating which version of the document should be indexed by search engines. Example:
<link href="style.css" rel="stylesheet">
<a href="http://example.com" rel="nofollow">
9. What is the difference between inline CSS and internal CSS?
Answer:
While both methods involve embedding styles into the HTML document itself, they serve slightly different purposes:
- Inline CSS: Styles applied directly to an HTML element through its
styleattribute. Useful for unique styling of a specific instance but generally not recommended for large, maintainable projects. Example:<div style="color: red;">Red Text</div> - Internal CSS: Defined within the
<style>element inside the document’s<head>section. Applicable to all elements within the document sharing the same class or ID, offering better organization and reusability compared to inline CSS.
10. Can you explain the usage of the colspan and rowspan attributes in a table?
Answer:
colspan: Specifies the number of columns an<td>or<th>element should span across. This attribute can merge several cells horizontally in one row. Example:
<table>
<tr>
<th>Name</th>
<th colspan="2">Contact Information</th>
</tr>
</table>
Here, the "Contact Information" header spans over two columns.
rowspan: Indicates the number of rows an<td>or<th>element should span across. It merges cells vertically, making one cell cover consecutive rows. Example:
<table>
<tr>
<th rowspan="2">Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>example@example.com</td>
<td>123-456-7890</td>
</tr>
</table>
In this case, the "Name" header covers two rows.
Login to post a comment.