HTML Essentials
HTML describes the meaning and structure of content using elements made of tags and attributes.
<a href="https://prepverse.vercel.app" target="_blank" rel="noopener">PrepVerse</a>
<!-- tag: a attribute: href content: PrepVerse -->
Common elements
| Purpose | Elements |
|---|---|
| Text | h1 to h6, p, strong, em, blockquote, code |
| Lists | ul, ol, li, dl |
| Links and media | a, img, video, audio, picture |
| Tables | table, thead, tbody, tr, th, td |
| Forms | form, input, label, select, textarea, button |
Semantic HTML
Use elements that describe their role: they improve accessibility and SEO.
<header><nav>...</nav></header>
<main>
<article>
<h1>Article title</h1>
<section>...</section>
</article>
<aside>Related links</aside>
</main>
<footer>...</footer>
Prefer button over a clickable div, and exactly one h1 per page with a logical heading order.
Forms
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Subscribe</button>
</form>
Always connect a label to its input (for / id). Built-in validation attributes: required, min, max, pattern, minlength.
Images and accessibility
<img src="diagram.png" alt="TCP three-way handshake diagram" width="640" height="360" loading="lazy" />
Write meaningful alt text (or alt="" for purely decorative images) and set width/height to prevent layout shift.
Loading Comments...