Module 1

1.6 Advance Html course(optional)

Advance HTML Course (optional)

"This part is optional, but I highly recommend checking it out! 🌟 It will give you valuable insights and practical skills that are essential for real-world HTML projects. 🏗️🚀" 

1️⃣ Semantic HTML & Accessibility

Semantic HTML improves SEO, accessibility, and code readability by using meaningful tags instead of <div> or <span>.

🔹 Key Semantic Tags:

• <header> – Defines the page or section header

• <nav> – Holds navigation links

• <article> – Represents self-contained content

• <section> – Groups related content

• <aside> – Sidebar content (related but not essential)

• <footer> – Defines the page footer

🔹 Accessibility Best Practices:

✔ Use <label> for form inputs (<label for="name">Name:</label>)
✔ Add alt text for images (<img src="logo.png" alt="Company Logo">)
✔ Use ARIA attributes for dynamic content (role="alert", aria-hidden="true")
✔ Ensure proper color contrast for readability

2️⃣ HTML Reference Guides (Button)

Buttons in HTML are used to trigger actions, submit forms, or interact with JavaScript.

🔹 Basic Button Syntax:

<button>Click Me</button>

<input type="button" value="Click Me">

🔹 Button Types:

• Submit Button (<button type="submit">Submit</button>) – Submits a form

• Reset Button (<button type="reset">Reset</button>) – Clears form inputs

Button with JavaScript

<button onclick="alert('Hello!')">Click Me</button>

🔹 Styling with CSS:

button {

  background-color: blue;

  color: white;

  padding: 10px 20px;

  border-radius: 5px;

}

3. Character Codes in HTML 

HTML Character Codes (Entities) are used to display special characters that might otherwise be interpreted as code.

🔹 Common Character Codes:

🔹 Example Usage:

<p>&copy; 2025 MyWebsite. All Rights Reserved.</p>

<p>Use &lt;h1&gt; for headings.</p>

📌 These topics are essential for writing clean, structured, and accessible HTML code! 🚀