BASIC
AND ADVANCED HTML TAGS
Introduction
HTML (Hypertext Markup Language) is the backbone of web development. It provides the structure for web pages, allowing you to define elements like headings, paragraphs, links, images, and more. This section will cover both basic and advanced HTML tags, their usage, and examples.
Basic HTML Tags
1. !DOCTYPE html:
Defines the document type and version of HTML.
<!DOCTYPE html>
2. html:
The root element of an HTML page.
<html lang=”en”>
3. head:
Contains meta-information about the document.
<head>
<meta charset=”UTF-8″>
<title>My First Website</title>
</head>
4. body:
Contains the content of the HTML document.
<body>
<!– Content goes here –>
</body>
5. h1 to h6:
Defines HTML headings, with <h1> being the highest (or most important) level and <h6> the lowest.
<h1>Main Heading</h1>
<h2>Subheading</h2>
6. p:
Defines a paragraph.
<p>This is a paragraph.</p>
7. a:
Defines a hyperlink, which is used to link from one page to another.
<a href=”https://www.example.com”>Visit Example</a>
8. img:
Embeds an image in the HTML document.
<img src=”image.jpg” alt=”Description of image”>
9. ul, ol, and li:
Defines unordered lists (<ul>), ordered lists (<ol>), and list items (<li>).
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
10. div:
Defines a division or a section in an HTML document.
<div>
<p>Content inside a div element.</p>
</div>
Advanced HTML Tags
1. header:
Defines a header for a document or section.
<header>
<h1>Welcome to My Website</h1>
</header>
2. footer:
Defines a footer for a document or section.
<footer>
<p>© 2024 My Website</p>
</footer>
3. article:
Specifies independent, self-contained content.
<article>
<h2>Article Title</h2>
<p>Article content…</p>
</article>
4. section:
Defines a section in a document.
<section>
<h2>Section Title</h2>
<p>Section content…</p>
</section>
5. nav:
Defines a set of navigation links.
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
</ul>
</nav>
6. aside:
Defines content aside from the main content (like a sidebar).
<aside>
<h2>Related Links</h2>
<ul>
<li><a href=”#link1″>Link 1</a></li>
<li><a href=”#link2″>Link 2</a></li>
</ul>
</aside>
7. figure and figcaption:
Used to markup illustrations, diagrams, photos, etc., and their captions.
<figure>
<img src=”image.jpg” alt=”Description of image”>
<figcaption>Figure 1: An example image.</figcaption>
</figure>
8. form:
Used to create an HTML form for user input.
<form action=”/submit” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<input type=”submit” value=”Submit”>
</form>
9. table:
Defines a table.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
10. video and audio:
Embeds video and audio content.
<video controls>
<source src=”video.mp4″ type=”video/mp4″>
Your browser does not support the video tag.
</video>
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
Additional Resources
Articles:
- “HTML Reference”
- “HTML Tags Guide”
Videos:
HTML Crash Course For Absolute Beginners on YouTube by Traversy Media
HTML Full Course – Build a Website Tutorial on YouTube by freeCodeCamp.org
Conclusion
Understanding both basic and advanced HTML tags is essential for creating structured and dynamic web pages. Practice using these tags to build various sections of a webpage and enhance your skills.
