How to Learn HTML in a Day Vol.3

A Quick Note on HTML Basics

Before delving into the tags, let’s address two important points:

1. Tag Similarities: Some HTML tags share similarities, making it challenging to differentiate their purposes. Pay attention to the specific roles of each tag.
2. Case Sensitivity: While HTML is not case-sensitive, it is a best practice to use lowercase for consistency and readability.

Additional HTML Tags and Their Uses

1. <nav> Tag
   • Purpose: Represents a navigation section containing links for navigating a website, such as Home, About, and Contact.
   • Example:
     html

     Copy code

     <nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>

2. <section> Tag
   • Purpose: Defines sections of a document, often used for grouping related content.
   • Example:
     html

     Copy code

     <section>
<h1>Welcome</h1>
<p>This is the main section of the webpage.</p>
</section>

3. <b> Tag
   • Purpose: Makes text bold, similar to using the bold function in text editors.
   • Example:
     html

     Copy code

     <p>This is <b>important</b> text.</p>

4. <em> Tag
   • Purpose: Adds emphasis to text, often rendering it in italics. Nesting increases emphasis.
   • Example:
     html

     Copy code

     <p>This is <em>very</em> important!</p>

5. <fieldset> Tag
   • Purpose: Groups related elements, often in forms, creating a visual boundary.
   • Example:
     html

     Copy code

     <fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</fieldset>

6. <form> Tag
   • Purpose: Creates a form for user inputs, including fields like textboxes, checkboxes, and radio buttons.
   • Example:
     html

     Copy code

     <form action="/submit-form" method="post">
<input type="text" name="username" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>

7. <input> Tag
   • Purpose: Allows data entry, with attributes specifying its type (text, password, etc.).
   • Example:
     html

     Copy code

     <input type="text" name="name" placeholder="Enter your name">
<input type="checkbox" name="subscribe"> Subscribe

8. <label> Tag
   • Purpose: Labels form elements, improving accessibility and clarity.
   • Example:
     html

     Copy code

     <label for="email">Email:</label>
<input type="email" id="email" name="email">

9. <q> Tag
   • Purpose: Wraps text in quotation marks.
   • Example:
     html

     Copy code

     <p>She said, <q>Hello!</q></p>