All roadmaps
YOUR LEARNING PATH

Web Development

Learn HTML, CSS, JavaScript and full-stack development through a step-by-step path with code examples and source links.

19 steps / 6-12 months estimated
STEP 01 OF 19

HTML Basics

HTML (HyperText Markup Language) is the backbone of every web page. It provides the structure and meaning to content by using elements like headings, paragraphs, lists, links, images, and more.

Break it down

01Headings

Headings are used to define the titles and subtitles on your page. Use <h1> for the main title, <h2> for subtitles, and so on up to <h6>.

<h1>Main Title</h1>
<h2>Subtitle</h2>
02Paragraphs

Paragraphs are blocks of text wrapped in <p> tags. They help organize your content into readable sections.

<p>This is a paragraph of text in HTML.</p>
03Lists

Lists help organize items. Use <ul> for unordered (bulleted) lists and <ol> for ordered (numbered) lists. Each item goes in an <li> tag.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>
04Links

Links allow users to navigate to other pages or sites. Use the <a> tag with an href attribute.

<a href="https://www.example.com">Visit Example</a>
05Images

Images are embedded using the <img> tag with a src attribute pointing to the image URL.

<img src="https://via.placeholder.com/150" alt="Placeholder Image" />
06Line Break & Horizontal Rule

<br> inserts a line break. <hr> creates a horizontal line, often used to separate content.

First line<br>Second line<hr>Section Divider
07Strong & Emphasis

<strong> makes text bold, <em> makes text italic for emphasis.

<strong>Important</strong> <em>Emphasized</em>
08Blockquote

<blockquote> is used to indicate a section that is quoted from another source.

<blockquote>
  This is a quoted section.
</blockquote>
09Code

<code> is used to display a single line or word of code inline.

Here is <code>inline code</code> in a sentence.
10Superscript & Subscript

<sup> displays text as superscript (above the line), <sub> as subscript (below the line). Useful for math and chemical formulas.

E = mc<sup>2</sup>
H<sub>2</sub>O
11Abbreviation

<abbr> marks up an abbreviation or acronym, and the title attribute provides the full term.

<abbr title="World Health Organization">WHO</abbr>
12Marked & Highlighted Text

<mark> highlights text with a yellow background by default.

This is <mark>important</mark> text.
13Preformatted Text

<pre> preserves whitespace and line breaks, displaying text exactly as written.

<pre>Line 1
  Line 2
    Line 3</pre>
14Deleted & Inserted Text

<del> shows deleted text (strikethrough), <ins> shows inserted text (underlined).

<del>Old text</del> <ins>New text</ins>
15Small Text

<small> renders text in a smaller font size.

<small>Fine print</small>
16Keyboard Input

<kbd> is used to indicate keyboard input.

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
17Address

<address> is used for contact information.

<address>123 Main St, City, Country</address>

Take it further

Continue learning on these source websites.

MDN HTML Basics(opens in a new tab)HTML Reference(opens in a new tab)
PUT IT INTO PRACTICE

Your next small step

Turn a lesson into a task, then make time to try it.

Plan this week's practiceStart a focused sessionBrowse practical project guides

Your privacy choices

We use optional analytics to understand visits and advertising to support Edvvo. These services stay off unless you accept. Your study tools work either way. Read our privacy policy.