Understanding HTML and Its Tags
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create web pages. It
structures the content on the web by using various tags that define different types of
content and their layout. Each HTML tag has a specific role and helps browsers render
content appropriately.
1. Basic Tags
Basic HTML tags define the general structure and content of a web page. These include:
<html> – The root element that wraps the entire HTML document.
<head> – Contains meta-information, scripts, and links to stylesheets.
<body> – Contains the content that is displayed in the browser.
<h1> to <h6> – Heading tags; <h1> is the largest and <h6> is the smallest.
<p> – Paragraph tag used to define blocks of text.
Example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Hyperlink and Image Tags
<a> – Creates a hyperlink to another webpage or location.
<img> – Embeds an image into the webpage.
Example:
<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Sample Image">
3. List Tags
<ul> – Creates an unordered (bulleted) list.
<ol> – Creates an ordered (numbered) list.
<li> – Defines an item in a list.
Example:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
4. Table Tags
<table> – Defines the table structure.
<tr> – Table row.
<td> – Table data/cell.
<th> – Table header cell.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
</table>
5. Form Tags
<form> – Creates an HTML form for user input.
<input> – Input field for data entry.
<label> – Labels an input field.
<textarea> – Multi-line text input.
<button> – Button to submit the form or trigger actions.
Example:
<form>
<label for='name'>Name:</label>
<input type='text' id='name'>
<br>
<textarea rows='4' cols='30'></textarea>
<br>
<button type='submit'>Submit</button>
</form>
6. Semantic Tags
Semantic tags clearly describe the role of the content within them.
<header> – Defines a header for a document or section.
<footer> – Defines a footer for a document or section.
<article> – Represents a self-contained piece of content.
<section> – Groups related content.
<nav> – Defines a navigation area.
Example:
<header>
<h1>Site Title</h1>
</header>
<nav>
<a href='#'>Home</a>
</nav>
<section>
<article>
<h2>Blog Post</h2>
<p>Content here...</p>
</article>
</section>
<footer>
<p>Copyright 2025</p>
</footer>