HTML Learning Notes (from Video) - 3

The video's link - https://youtu.be/HcOc7P5BMi4?si=eIuDDGoj-5D3r6pV 

  

Chapter 3: Intermediate HTML 

Forms

• <form> → Starts form.

• Input types:

  • text → Single line input.

  • password → Hidden input.

  • radio → Choose one option.

  • checkbox → Choose multiple options.

  • dropdown → <select><option>.

  • textarea → Multi-line text.

• <input type="submit"> → Submit button.

<label> Tag

• Connects text with input field using for.

• Helps screen readers & improves accessibility.

• Clicking label focuses input field.

Attributes for Styling

• id → Unique (only for one element).

• class → Group of elements (reusable).

• Useful for CSS styling & JavaScript functions.

Block vs Inline Elements

• Block (<div>) → Full width, new line.

• Inline (<span>) → Only content width, stays in line.

Semantic Tags

• <header> → Top area (logo, nav).

• <footer> → Bottom area (copyright).

• <main> → Main page content.

• <section> → Group of related content.

• <article> → Independent content (blog, news).

• <aside> → Side info (ads, sidebar).

• <nav> → Navigation links.

Why Semantic HTML?

• SEO → Search engines understand better.

• Accessibility → Screen readers identify page parts.

• Clean Code → Easier maintenance.

Structuring Multi-Page Websites

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

• Use <nav> for menus.

• Link multiple pages with relative paths (about.html).