english
french
arabic
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
HTML Fundamentals
Take The Quiz
From structure to fluency
You can already build a basic page. Now let’s meet the elements you will reach for every single day — and how to use them correctly.
The elements you will use most
| Element | Purpose | Example |
|---|---|---|
<h1>–<h6> | Headings, most to least important | <h1>Title</h1> |
<p> | A paragraph of text | <p>Hello</p> |
<a> | A link to another page | <a href="...">Link</a> |
<img> | An image | <img src="..." alt="..."> |
<ul>/<li> | A bulleted list | <li>Item</li> |
Attributes: extra information
Attributes live inside the opening tag and configure an element. The ones you’ll use constantly are href (where a link goes) and src/alt (an image and its text description).
<a href="https://devosoft.com">Visit Devosoft</a>
<img src="logo.png" alt="Devosoft logo">Always write alt text
The alt attribute describes an image for screen-reader users and shows if the image fails to load. Never leave it out.
Semantic HTML
Instead of wrapping everything in anonymous <div>s, use tags that describe their role. Semantic markup is easier to read, better for SEO, and far more accessible.
<header>...site header...</header>
<nav>...menu...</nav>
<main>
<article>...the main content...</article>
</main>
<footer>...site footer...</footer>Avoid “div soup”
A page made only of <div>s tells the browser nothing about meaning. Prefer <header>, <nav>, <main>, <section> and <footer> whenever they fit.
A first form
Forms collect input from the user. Every field should be tied to a <label> for clarity and accessibility.
<form>
<label for="email">Email</label>
<input id="email" type="email" name="email">
<button type="submit">Sign up</button>
</form>What’s the difference between <section> and <div>?
<section> groups related content with a meaning; <div> is a neutral container used mainly for styling.Can I have several <h1> on a page?
<h1> per page, then <h2>–<h6> to build a clear hierarchy.