« Recipes

HTML Recipes

Login

Since a login form is a self-contained, complete composition, and could be reused in various document contexts, article is an appropriate element to wrap it.

We use header and footer for common login form aspects like a form title and registration link. See other recipes for details on forms and form validation.

<article>
<header>
<h2>Login</h2>
</header>
<form>
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password" />
</p>
</form>
<footer>
<a href="...">Register</a>
</footer>
</article>

References

The article element |  The header element  |  The footer element

Deeply understand semantic HTML authoring and CSS with my course:
Understanding HTML and CSS.