HTML Fundamentals - Continuation

1. Semantic HTML Elements

Semantic elements clearly describe their purpose, making your code more readable and accessible for assistive technologies. Here are some commonly used semantic elements:

<header>: Defines the page's header or a section header.
<main>: Specifies the main content of the page.
<footer>: Represents the footer for the page or section.
<article>: Represents self-contained content, such as a blog post.
<section>: Groups related content under one heading.
<aside>: Defines content indirectly related to the main content, such as a sidebar.

Example:


<header>
    <h1>Welcome to My Website</h1>
</header>

<main>
    <section>
        <h2>About Us</h2>
        <p>We provide quality content for learning HTML.</p>
    </section>

    <aside>
        <p>Sidebar content, such as recent posts or links.</p>
    </aside>
</main>

<footer>
    <p>Copyright 2025.</p>
</footer>

2. HTML Attributes

Attributes provide additional information about an element, such as setting its behavior or styling. They are included inside the opening tag.

Common Attributes:

id: Assigns a unique identifier to an element.
class: Groups multiple elements for styling or JavaScript targeting.
href: Specifies the URL for a hyperlink.
src: Defines the source file for images, videos, or scripts.
alt: Provides alternative text for images (important for accessibility).
title: Adds a tooltip displayed when hovering over the element.

Example with Attributes:


<a href="https://example.com" title="Go to Example">Visit Example</a>

<img src="image.jpg" alt="A description of the image">

3. Linking External Resources

Webpages often use external resources like stylesheets, scripts, or images to enhance functionality. Here’s how to include them:

3.1 Linking a CSS File:

Use the `<link>` tag in the `<head>` section:


<link rel="stylesheet" href="styles.css">

3.2 Linking a JavaScript File:

Include the `<script>` tag, usually just before the closing `</body>` tag:


<script src="script.js"></script>

3.3 Adding Images:

Use the `<img>` tag to add images:


<img src="logo.png" alt="Company Logo" width="200" height="100">

4. Advanced Best Practices

Use Descriptive Titles: Always include a meaningful `<title>` in the `<head>` section.
Optimize Images: Compress images for faster loading and add `alt` attributes for accessibility.
Organize Files: Store files in logical folders (e.g., `css/`, `js/`, `img/`).
Validate Your HTML: Use the W3C Validator to ensure your HTML is error-free.

Back