Full Class Note Tutorial: Understanding Common HTML Tags
Introduction:
In this tutorial, we will dive into some essential HTML tags, including the <nav>, <a>,
<li>, <header>, <section>, <div>, <footer>, <h1> to <h6>, <hr>, <img>, <form>,
<video>, and <iframe> tags. These tags are fundamental for structuring and organizing
web pages. Understanding their purpose and usage will allow you to build well-organized
and functional websites, including those like Wabiskills, which provides online tech
education.
1. <nav> (Navigation) Tag
The <nav> tag is used to define a block of navigation links, typically used to create a
menu or navigation bar for your website. It helps users move between different sections
or pages.
Example:
<nav>
<a href="#home">Home</a>
<a href="#courses">Courses</a>
<a href="#contact">Contact Us</a>
</nav>
2. <a> (Anchor) Tag
The <a> tag is used to create hyperlinks, allowing users to navigate to different pages,
sections, or external sites.
Example:
<a href="https://wabiskills.com">Visit Wabiskills</a>
You can also link to specific sections of the same webpage:
<a href="#html-basics">Jump to HTML Basics</a>
3. <li> (List Item) Tag
The <li> tag is used to define a list item, and it can be placed inside ordered (<ol>) or
unordered (<ul>) lists.
Example:
<ul>
<li>Introduction to HTML</li>
<li>CSS Basics</li>
<li>JavaScript for Beginners</li>
</ul>
4. <header> Tag
The <header> tag defines the header section of a webpage or section. It often contains
navigation menus, logos, or introductory content.
Example:
<header>
<h1>Welcome to Wabiskills</h1>
<p>Your gateway to learning web development!</p>
</header>
5. <section> Tag
The <section> tag is used to define sections of a document, such as different topics or
areas of a webpage. It’s great for organizing content into logical blocks.
Example:
<section id="html-basics">
<h2>HTML Basics</h2>
<p>Learn the foundation of web development through HTML.</p>
</section>
6. <div> Tag
The <div> tag is a block-level container used to group elements for styling purposes or to
organize content logically. It does not inherently have any semantic meaning but is useful
for layout and design.
Example:
<div class="course-container">
<h3>Frontend Development</h3>
<p>Learn how to build beautiful, responsive websites.</p>
</div>
7. <footer> Tag
The <footer> tag is used to define the footer of a webpage, often containing copyright
information, navigation links, or contact details.
Example:
<footer>
<p>© 2024 Wabiskills. All rights reserved.</p>
<nav>
<a href="#privacy-policy">Privacy Policy</a>
<a href="#terms">Terms of Service</a>
</nav>
</footer>
8. <h1> to <h6> (Heading) Tags
The heading tags represent six levels of headings in HTML. <h1> is the most important,
and <h6> is the least important. They structure the content hierarchically.
Example:
<h1>Welcome to Wabiskills</h1>
<h2>Courses Offered</h2>
<h3>HTML Basics</h3>
<h4>Course Outline</h4>
9. <hr> (Horizontal Rule) Tag
The <hr> tag is used to create a horizontal line, typically to separate content or sections.
Example:
<h2>HTML Basics</h2>
<p>Learn the essentials of HTML and web development.</p>
<hr>
<p>Next: CSS Basics</p>
10. <img> (Image) Tag
The <img> tag is used to embed images in a webpage.
Example:
<img src="wabiskills-logo.png" alt="Wabiskills Logo" width="200" height="100">
11. <form> Tag
The <form> tag is used to create interactive forms for user input, such as sign-ups,
logins, or feedback submissions.
Example:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
12. <video> Tag
The <video> tag allows embedding videos in the webpage.
Example:
<video width="400" controls>
<source src="wabiskills-intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
13. <iframe> Tag
The <iframe> tag is used to embed another HTML document, such as an external
webpage or video, within the current page.
Example:
<iframe src="https://www.youtube.com/embed/abc12345" width="560" height="315"
allowfullscreen></iframe>
Conclusion:
These HTML tags form the building blocks of any webpage, including educational
platforms like Wabiskills. By understanding how to use these tags correctly, you can
structure content, provide navigation, and create interactive elements to enhance the user
experience. Continue experimenting with these tags to develop your own web projects!
