The Essential HTML Tags Every Beginner Should Know
Mike Codeur
Are you starting with HTML and want to master the basics quickly?
Don't worry! In this article, discover the essential HTML tags to structure a web page. With these fundamental elements, you will be able to create simple and functional websites in no time.
What is an HTML tag?
An HTML tag is an element used to structure and organize the content of a web page. Tags work in pairs: an opening tag and a closing tag, like this:
<p>This is a paragraph.</p>Some tags, like those for inserting an image, are "self-closing":
<img src="image.jpg" alt="An image">Essential tags for beginners
1. <html>: The root of the document
Every HTML document starts and ends with this tag. It wraps all the content of the page.
Example:
<!DOCTYPE html>
<html lang="en">
<!-- Content here -->
</html>2. <head>: Page information
The <head> contains metadata, like the page title, styles, or scripts.
Example:
<head>
<meta charset="UTF-8">
<title>My First Website</title>
</head>3. <body>: Visible content
Everything the user sees on the page should be inside this tag.
Example:
<body>
<h1>Welcome to my website</h1>
<p>This is text visible to the user.</p>
</body>4. <h1> to <h6>: Headings
These tags define headings, from the most important (<h1>) to the least important (<h6>).
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>5. <p>: Paragraphs
Use this tag to add blocks of text.
Example:
<p>This is a paragraph containing text.</p>6. <a>: Links
Links allow you to redirect the user to another page or site.
Example:
<a href="https://www.google.com" target="_blank">Visit Google</a>7. <img>: Images
To insert an image, use the <img> tag. It requires two attributes: src (source of the image) and alt (description of the image).
Example:
<img src="image.jpg" alt="Image description">8. <ul> and <ol>: Lists
<ul>: Unordered list (bullets).<ol>: Ordered list (numbers).
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>9. <table>: Tables
To display data in a tabular format.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>10. <div> and <span>: Structure
<div>: Used to group blocks of elements.<span>: Used to style inline text.
Example:
<div>
<p>This is a content block.</p>
</div>
<span style="color: red;">Red text</span>Practical Example: Create a mini HTML page
Combine all these tags to create a functional page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo Page</title>
</head>
<body>
<h1>Welcome to my page</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Link to a site</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<img src="https://via.placeholder.com/150" alt="Example image">
</body>
</html>Conclusion
The HTML tags presented here form the foundation of any website. Once you master them, you'll have everything you need to start structuring your pages. So, what are you waiting for? Dive in now and explore the exciting world of web development! 🚀