Intermediate to Advanced HTML

1. Ids & Classes

The id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in a document.

The class attribute is used to specify a class for an HTML element. Multiple elements can share the same class.

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

    <title>IDS &amp; Classes</title>
</head>
<body>

    <p id="paragraph">This is a paragraph</p>
    <p class="another-paragraph">This is another paragraph</p>

</body>
</html>

2. Span & Div tags

The div tag defines a section in a document. The span tag is an inline container used to target a part of a text.

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

<head>

    <title>Span &amp; Div</title>
</head>

<body>

    <div id="header-div">
        <h1>Website</h1>
        <span class="important">
            <p>Hello world!</p>
        </span>
    </div>

</body>

</html>

3. Intro to HTML5

The header element represents a container for introductory content. The footer tag defines a footer for a document. The nav tag defines a set of navigation links. The section tag defines a section in a document. The article tag specifies self-contained content.

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

<head>

    <title>Intro to HTML5</title>
</head>

<body>

    <header>
        <h1>Website</h1>
    </header>

    <nav>
        <h3>Navigation bar</h3>
        <ul>
            <li><a href="/">Page1</a></li>
            <li><a href="/">Page2</a></li>
            <li><a href="/">Page3</a></li>

        </ul>

    </nav>

    <article>
        <section>
            <h3>This is a article</h3>

        </section>

        <section>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eligendi hic est autem in sapiente earum
                ipsa necessitatibus. Officia quod
                dolorum quidem nulla dolores totam necessitatibus reprehenderit fuga ullam explicabo?</p>

        </section>

    </article>

    <footer>
        <p>&copy; James Smith</p>

    </footer>

</body>

</html>

4. HTML5 inputs

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

<head>

    <title>HTML5 Inputs</title>
</head>

<body>

    <!-- Search -->

    <label for="form-search">Search</label>
    <input type="search" id="form-search">

    <br><br>

    <!-- Email -->

    <label for="form-email">Email</label>
    <input type="email" id="form-search">

    <br><br>

    <!-- URL -->

    <label for="form-url">Url</label>
    <input type="url" id="form-url">

    <br><br>

    <!-- Range -->

    <label for="form-number">Range</label>
    <input type="range" id="form-range" min="1" max="100" value="0">

    <br><br>

    <!-- Number -->

    <label for="form-range">Number</label>
    <input type="number" id="form-number" min="5" max="50" step="5">

    <br><br>

    <!-- Date -->

    <label for="form-date">Date</label>
    <input type="date" id="form-date" min="2021-01-01" max="2022-01-01">

    <br><br>

    <!-- Month -->

    <label for="form-month">Month</label>
    <input type="month" id="form-month">

    <br><br>

    <!-- Week -->

    <label for="form-week">Week</label>
    <input type="week" id="form-week">

    <br><br>

    <!-- Time -->

    <label for="form-time">time</label>
    <input type="time" id="form-time">

    <br><br>

    <!-- Colour -->

    <label for="form-colour">Colour</label>
    <input type="color" id="form-colour">

    <br><br>




</body>

</html>

Blog