HTML Advanced: Advance your html skills

3 min readJun 13, 2024

Once you’re comfortable with the basics of HTML, it’s time to dive deeper into more advanced topics.

In this post, we’ll cover semantic HTML, forms and form validation, and accessibility best practices. These skills will help you create more meaningful, user-friendly, and accessible web pages.

Semantic HTML

Semantic HTML refers to using HTML tags that have meaningful names, which helps describe the content of the elements. This not only improves the readability of your code but also enhances SEO and accessibility.

Key Semantic Elements:

<header>: Defines a header for a document or section.
<nav>: Defines navigation links.
<main>: Specifies the main content of a document.
<article>: Represents an independent piece of content.
<section>: Defines a section in a document.
<aside>: Contains content indirectly related to the main content.
<footer>: Defines a footer for a document or section.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
</head>

<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article Title</h2>
            <p>This is an article.</p>
        </article>
        <section>
            <h2>Section Title</h2>
            <p>This is a section.</p>
        </section>
    </main>
    <aside>
        <h2>Related Content</h2>
        <p>This is an aside.</p>
    </aside>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>

</html>

Forms and Form Validation

Forms are crucial for collecting user input. Understanding how to create and validate forms is essential for any web developer.

Creating a Form:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Submit">
</form>

Form Validation:

HTML5 introduces built-in form validation features that make it easier to ensure users provide valid input.

Example:

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" minlength="5" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>
    <input type="submit" value="Submit">
</form>

Explanation:

required: Ensures the field must be filled out.
minlength: Specifies the minimum number of characters.
type=”email”: Validates that the input is an email address.
min and max: Define numeric limits for the input.

Accessibility Best Practices

Accessibility is about making your website usable for everyone, including people with disabilities. Following best practices ensures your site is inclusive and can be navigated and understood by all users.

Key Practices:

Use Semantic HTML: As mentioned earlier, semantic tags improve accessibility.
Alt Text for Images: Provide descriptive text for images using the alt attribute.
Labels for Form Elements: Use <label> tags to associate text with form inputs.
Keyboard Navigation: Ensure all interactive elements are accessible via keyboard.
ARIA Landmarks: Use ARIA (Accessible Rich Internet Applications) roles to enhance the accessibility of your site.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accessible HTML Example</title>
</head>

<body>
    <header role="banner">
        <h1>My Accessible Website</h1>
        <nav role="navigation">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main role="main">
        <article role="article">
            <h2>Article Title</h2>
            <p>This is an article.</p>
        </article>
        <section role="region">
            <h2>Section Title</h2>
            <p>This is a section.</p>
        </section>
    </main>
    <aside role="complementary">
        <h2>Related Content</h2>
        <p>This is an aside.</p>
    </aside>
    <footer role="contentinfo">
        <p>&copy; 2024 My Accessible Website</p>
    </footer>
</body>

</html>

Conclusion

Advancing your HTML skills by learning about semantic HTML, forms, form validation, and accessibility best practices will make you a more proficient and inclusive web developer.

These advanced techniques not only enhance the user experience but also ensure your web pages are robust, accessible, and easier to maintain.

Happy coding!

HTML Advanced: Advance your html skills

Semantic HTML

Key Semantic Elements:

Example:

Forms and Form Validation

Creating a Form:

Form Validation:

Accessibility Best Practices

Key Practices:

Example:

Conclusion

Written by etwinworkshop