HTML course · learn to build web pages from scratch

1

MODULE 1

What is HTML?

How a web page works

You write HTML code, the browser reads it and draws it on the screen as a page. In other words, HTML is your instructions; the browser is what carries them out. Below, the code is on the left and the browser result is on the right. Change the code and watch the right side update instantly.

Key idea: an HTML file is plain text. The browser reads that text and turns it into a nicely formatted page.

What a tag is

HTML is made of tags placed inside angle brackets < >. Each tag tells the browser "what this part is". A tag usually comes in a pair: the "opening" tag starts it, the "closing" tag ends it, and the "content" (text) sits between them.

Tag anatomy: <h1> makes a large heading

But not every tag is a pair. Some are "single" (standalone): they are not closed, because they have no content inside. Telling these two kinds apart is one of the most important basics in HTML:

PAIRED TAG<h1> Hello </h1>

Opening and closing tag together. There is content between them. For example: <h1>, <p>, <div>.

SINGLE TAG<br>

Comes alone, with no closing tag. It is empty inside. For example: <br>, <hr>, <img>.

Now try it yourself. In the editor below, wrap the text in <h1> or <p> tags and watch the result:

<h1> makes the largest heading, while <p> makes an ordinary paragraph.

Your first practice

Now build a small page yourself. The editor should have one heading and one paragraph. When the task is done, the marker below turns green.

TaskThe page already has a heading (<h1>). Add your own paragraph (<p>...</p>) below it. Both should contain text.

Practice: reinforce

Complete the short exercises below one by one. For each, write code and see the result right beside it. When all three exercises are correct, the section is completed.

Module test

2

MODULE 2

The page skeleton

The complete page skeleton

A real HTML page doesn't start with lone tags, but with a standard "skeleton". This skeleton tells the browser how to read the page. Almost every page consists of the following parts:

<html> wraps the whole page; inside it are <head> (invisible) and <body> (visible)

What each part does:

<!DOCTYPE html>: tells the browser "this is HTML5" (it goes on the first line).
<html lang="uz">: wraps the whole page; lang="uz" indicates the page language is Uzbek (important for search engines and translators).
<meta charset="utf-8">: sets the character encoding. Without it, Uzbek or other letters may appear garbled. It must come first inside <head>. This is a single tag (not closed).
<head>: invisible information (settings, page name).
<body>: the visible part (heading, text, image).
<title>: the page name; it appears in the browser tab.

Below is the complete skeleton. Change it and watch the result:

Key idea: this skeleton is almost identical on every HTML page. Once you memorize it, you'll always start with it. Real websites also have <meta name="viewport"> (to fit the phone screen); we'll cover that in the media module.

The difference between head and body

<head> and <body> are the two main parts of a page. What is inside <head> is not visible on the screen (it is only information about the page). What is inside <body> is visible on the screen.

The <title> inside <head> appears in the browser tab; <body> is what shows on the page

Try it: the <title> inside <head> does not appear in the result, only the text in <body> is visible:

The <title> text appears in the browser's tab title, not inside the page.

Practice: give the page a name

Below is a complete skeleton, but the page name is empty. Write your own page name inside the <title> tag.

TaskWrite your page name between <title> and </title> (for example, your name or the site name).

Practice: reinforce

Complete the short exercises below one by one. For each, write code and see the result right beside it. When all three exercises are correct, the section is completed.

Module test

3

MODULE 3

Text and headings

Headings: from h1 to h6

There are 6 heading levels: <h1> is the largest, <h6> is the smallest. They divide text into sections. A page usually has one <h1> (the main heading), and the rest are used for smaller sections.

Top to bottom: <h1> is the largest, <h6> is the smallest

In the editor, change the heading number (from 1 to 6) and see how the size changes:

Tip: choose a heading for its importance, not its size. If you need it to look bigger, you'll use CSS later.

Paragraphs: p, br and whitespace

Ordinary text is written inside <p> (paragraph). Each <p> is a separate block, leaving space before and after it. Important rule: extra spaces and new lines in the HTML code collapse into a single space in the browser. So even if you put 10 spaces in the code, there will be one on screen.

The browser collapses extra spaces and new lines into a single space

To deliberately start a new line within text, use <br> (a single tag), and use <hr> for a line that separates sections. Try it below: the extra spaces in the first paragraph are collapsed, while in the second <br> creates a new line:

Remember: pressing Enter in the code is not enough to start text on a new line (it turns into a space). Use <br> to break a single line, and a new <p> for a new paragraph.

Styles: the style attribute

To change an element's appearance (color, size, background), you give it a style attribute. Inside it, CSS properties are written as property: value, separated by ;. This is called "inline style" (inline CSS).

Inside, property: value pairs are separated by ;

The most commonly used properties:

color: text color (for example red or #e34f26)
background-color: background color
font-size: text size (for example 20px)
text-align: alignment (left, center, right)
font-family: font type (for example Georgia)
padding: inner spacing (for example 10px)

Try it live below: change the values and watch how the appearance changes:

Inline style vs separate CSS: the style attribute is quick and easy, but you have to write it on each element separately. To make many elements look the same, you'll later use separate CSS (with a class), which is mentioned in module 7.

Text formatting tags

Ordinary text is written inside <p> (paragraph). There are many tags for setting apart certain words within it. First, one important concept: by structure, tags fall into two kinds.

PAIRED TAG<b> text </b>

An opening and closing tag come together, with content (text) between them. Most tags are like this.

SINGLE TAG<br>

Comes alone, with no closing part. It has no content inside. For example: <br>, <hr>, <img>.

Below are the main formatting tags: their code, the rendered result, their purpose, and their type. Watch the real appearance in the Result column:

Tag	Result	Purpose	Type
`<strong>`	text	Important text (bold + meaning)	paired
`<b>`	text	Bold (appearance only)	paired
`<em>`	text	Emphasized text (italic + meaning)	paired
`<i>`	text	Italic (appearance only)	paired
`<mark>`	text	Highlighted (colored background)	paired
`<ins>`	text	Inserted text (underlined)	paired
`<u>`	text	Underline (appearance only)	paired
`<del>`	~~text~~	Deleted text	paired
`<s>`	~~text~~	Outdated (struck through)	paired
`<sub>`	H₂O	Subscript	paired
`<sup>`	x²	Superscript (power)	paired
`<code>`	`a = 5`	Code (monospace font)	paired
`<q>`	hello	Short quotation (adds quote marks)	paired
`<marquee>`	text	Scrolls text (outdated)	paired
`<br>`	line 1 line 2	Starts a new line	single
`<hr>`		Line separating sections	single

Note: <marquee> (moving text) is an outdated tag. Browsers still show it, but modern sites use CSS animation instead.

Same appearance, different meaning: <b> and <strong> both show bold, but <strong> conveys "this is important" (search engines and screen readers understand it). The same goes for <i> and <em>. When possible, choose the meaningful variant (<strong>, <em>).

Now try it yourself. Wrap words in different tags and watch the result:

Comments

A comment is a note you write in the code for yourself. The browser does not read it or show it on screen. A comment starts with ; everything between them stays hidden. Comments are useful for two things: (1) explaining the code, (2) temporarily "turning off" a part (hiding it without deleting it).

Everything inside  is invisible in the browser

Try it below: the comment and the commented-out paragraph do not appear in the result:

Tip: if you don't need a tag for a while, don't delete it, wrap it between  instead. When you need it again, remove the comment markers and bring it back.

Practice: a small article

The page has a heading and a paragraph. Now make some word in the paragraph bold with the <b> tag.

TaskThe page should have a heading (<h1>-<h6>) and a paragraph (<p>), and at least one word should be bold with <b>.

Practice: reinforce

Complete the short exercises below one by one. For each, write code and see the result right beside it. When all three exercises are correct, the section is completed.

Module test

4

MODULE 4

Lists and links

Lists: ul, ol and li

A list is made of three tags. The outer tag wraps the whole list: <ul> (bulleted, unordered) or <ol> (numbered, ordered). Inside, each item is written in its own <li> (list item) tag. That is, you never put text directly, you always place it between <li>...</li>, then put all the <li> elements inside <ul> or <ol>.

Identical <li> items (no dot or number in the code). Only the outer tag differs: <ul> draws a bullet (•), <ol> draws a number (1.)

In the editor, add another <li> to the list or change <ul> to <ol> and watch the result:

You choose the appearance of the bullet or number with the type attribute. It goes on the opening tag, for example <ul type="square">. Below are all the values and their rendered results:

Code	Result	Note
`<ul type="disc">`	item	Filled circle (default)
`<ul type="circle">`	item	Empty circle
`<ul type="square">`	item	Filled square
`<ol type="1">`	item	Number (default)
`<ol type="A">`	item	Uppercase letter: A, B, C
`<ol type="a">`	item	Lowercase letter: a, b, c
`<ol type="I">`	item	Uppercase Roman: I, II, III
`<ol type="i">`	item	Lowercase Roman: i, ii, iii

Tip: use <ul> when order doesn't matter (a shopping list), and <ol> when order matters (recipe steps). <ol> also has the start="5" (start from 5) and reversed (count backwards) attributes.

Links and attributes

A link takes you to another page when clicked. It is created with the <a> tag. But <a> needs to know where to go, and we tell it that through an attribute.

An attribute is extra information inside a tag. It is written as name="value" inside the opening tag. For a link, this attribute is called href (the address):

href sets where it goes, and the text inside the tag sets what is shown

In the editor, change the link text or address and click the link in the result:

If you add the target="_blank" attribute, the link opens in a new tab: <a href="..." target="_blank">.

Practice: build a menu

Build a small menu: it should have one list and one link.

TaskThe page should have a list (<ul> or <ol>, with <li> inside) and one link (<a href="...">).

Practice: reinforce

Complete the short exercises below one by one. For each, write code and see the result right beside it. When all three exercises are correct, the section is completed.

Module test

5

MODULE 5

Images and media

Adding an image: img

To put an image on a page, you use the <img> tag. It is a single (standalone) tag, so it is not closed. The image itself is not inside the code; the tag only points to where the image is. For this there are two important attributes: src (the image address) and alt (text for when the image doesn't load or for a user with limited vision).

src is the image address (file name or link), and alt is the text describing it

In the editor, change the alt text or the width value and watch the result:

Why alt matters: if the image doesn't load, the alt text appears in its place; a screen reader reads it aloud; a search engine understands what the image is from it. So always write meaningful alt text.

Size and other media

An image's size is set in pixels by the width and height attributes. Often only one (for example width) is written, and the other changes proportionally.

width sets the width and height sets the height, in pixels

In the editor, change the width value and see how the image shrinks and grows:

Besides images, you can also add video and audio. They are paired tags and, with the controls attribute, show playback buttons:

<img>: shows an image (src, alt). Single tag.
<video controls>: plays a video (play, pause, volume). Paired tag.
<audio controls>: plays audio. Paired tag.

Below is a live example: the controls attribute shows playback buttons. Click the video and audio players and try them:

Tip: controlling size later with CSS, rather than with an HTML attribute, is more convenient for responsive sites. For now, width is enough.

Embedding a YouTube video

To put a video from another site (for example YouTube) on your own page, you use <iframe> ("inner frame"). Open the YouTube video, click "Share", then "Embed", and copy the given <iframe> code onto your page. The src holds the video address, and width/height its size:

<iframe width="420" height="236"
  src="https://www.youtube.com/embed/tgbNymZ7vqY"
  title="YouTube video"></iframe>

The code above embeds exactly the following video on the page (click to play):

What an iframe is: it is a "window" that places another page (a video, a map) inside your page. YouTube, Google Maps and the like are embedded through exactly this <iframe>. The video ID (the part after embed/) is different for each video.

Practice: give the image an alt

The image below has no alt. Add a meaningful alt text to it.

TaskAdd a non-empty alt="..." attribute to the <img> tag (write what the image shows).

Practice: reinforce

Complete the short exercises below one by one. For each, write code and see the result right beside it. When all three exercises are correct, the section is completed.

Module test

6

MODULE 6

Tables and forms

Table: table, tr, th, td

To arrange data in rows and columns, you use a table: <table> is the whole table, <tr> is one row (table row), <th> is a header cell (bold, centered), <td> is an ordinary cell (table data). For a visible border, we give the <table> tag the border="1" attribute (this is an HTML attribute), and cellpadding="6" adds space inside the cells.

<table> is the table, <tr> a row, <th> a header cell, <td> an ordinary cell

Below is a two-column table. Change the cell (<td>) text or add a new row (<tr>):

Order matters: <tr> goes inside <table>, and <th> or <td> go inside <tr>. It's best to have the same number of columns in every row.

Merging cells: colspan, rowspan

Sometimes one cell needs to span several columns or rows. colspan="2" merges a cell horizontally (2 columns wide). rowspan="2" merges a cell vertically (2 rows tall). When a cell is merged, no extra <td> is written in its place in the next row or column.

colspan stretches a cell across several columns, rowspan across several rows

Below, colspan (the top header spans 2 columns) and rowspan ("Language" spans 2 rows) are used together. Try changing the numbers:

Remember: colspan = across columns (horizontal), rowspan = across rows (vertical). However many places a merged cell occupies, that many fewer <td> are written in those rows.

Forms and input types

To collect information from a user, you use a form. A form lives inside <form>: <label> is the field name (label), <input> is the input field, <button> is a button. The type attribute of <input> sets the field type. The main types are listed below (click each and try it):

type	Appearance	Description
`text`		Ordinary single-line text
`password`		Hidden password (dots)
`email`		Email (checks for the @ sign)
`number`		Numbers only (with arrow buttons)
`tel`		Phone number
`url`		Link (URL) address
`search`		Search field
`date`		Pick a date (calendar)
`time`		Pick a time
`datetime-local`		Date and time together
`month`		Month and year
`week`		Year and week
`color`		Pick a color
`range`		Slider (range)
`checkbox`		Checkbox (multiple choice)
`radio`		Radio button (choose one)
`file`		Upload a file
`submit`		Button that submits the form
`reset`		Button that clears the fields
`button`		Ordinary button
`hidden`	not visible	Hidden field (for data)

Two important attributes: placeholder shows a hint text inside the field while it is empty; required makes filling the field mandatory (if empty, the form won't submit). Below is a live form:

placeholder and required: placeholder="Your name" is gray hint text; required is a valueless attribute, and if present the field cannot be left empty. <input> is a single tag, not closed.

textarea, radio, checkbox, select

Besides <input>, there are a few more field types:

<textarea>: multi-line text (a comment, a message). Paired tag. The rows attribute sets its height.
<input type="radio">: only one of the options is selected. To form a group, their name attribute must be the same.
<input type="checkbox">: multiple options can be checked together.
<select> and the <option> inside it: a dropdown list.

radio is a round button (choose one), checkbox is a box (choose several)

Below is everything live. Click the radio buttons, checkboxes and dropdown list:

name for radio: give the options of one question the same name (for example name="gender" on both). Only then do they form a single group where only one can be selected.

Practice: add a comment field to the form

The form below has a name field and a button. Add a <textarea> so a comment can be written.

TaskAdd a <textarea></textarea> (comment field) inside the form.

Practice: reinforce

Complete the short exercises below one by one. For each, write code and see the result right beside it. When all three exercises are correct, the section is completed.

Module test

7

MODULE 7

Structure: div, span, class, id

div: grouping elements

On a large page you'll need to divide elements into groups: the top part, the main part, the bottom part. For this the <div> tag is used. <div> itself gives no appearance; it simply puts several elements into one box. This box is later styled or positioned with CSS.

<div> combines several elements into one invisible box

Below, a heading and text are placed inside a <div>. The border shows the box:

What div is for: it is an invisible box. It keeps several elements together, so they can be styled or moved as a unit. This way the page is split into logical parts.

span and block/inline elements

HTML elements fall into two main kinds: block and inline. A block element always starts on a new line and takes up the full width (left to right): <div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>. An inline element does not open a new line; it takes only as much space as its content and sits side by side within text: <span>, <a>, <b>, <img>, <input>. So <div> is a block box (grouping larger parts), and <span> is an inline box (marking a small piece within text).

Block elements start on a new line as full-width columns; inline elements sit side by side within a line of text

See the difference below: two <div>s (block) each start on a new line and are full-width; a <span> (inline) sits side by side within the sentence. The background color shows the width of the boxes:

When to use span: to mark a single word or piece within text (for example, showing one word in a different color; then giving it a class and styling with CSS). To group larger parts, use <div>.

class and id: giving a label

You can give elements a label. There are two kinds of label: class and id. A class is a group label: it can be given to several elements (for example class="karta" on all cards). An id is a unique label: it is given to only one element on the page (for example id="asosiy" on the main block). These labels later help CSS and JavaScript find the element they need.

The green class is put on several elements (repeated); the orange id on only one (unique)

In the code below, .karta (class) and #asosiy (id) are styled inside <style>. Both divs have the karta class, but only one has the asosiy id:

Remember the difference: a class repeats (many elements), an id does not repeat (one, unique element). An element can have both. In CSS, . means class and # means id.

Practice: build a card

A green-bordered .mahsulot style is already prepared below. Now write a <div> with that class yourself and put some text inside it.

TaskWrite a <div class="mahsulot">...</div> with text inside it (a green frame should appear).

Practice: reinforce

Complete the short exercises below one by one. For each, write code and see the result right beside it. When all three exercises are correct, the section is completed.

Module test

8

MODULE 8

Semantic HTML and the final project

Semantic tags: header, nav, main, footer

So far we used <div> for grouping. But <div> doesn't say "what this is". HTML5 provides semantic (meaningful) tags: they group just like <div>, but also state the part's role. The main ones: <header> the top part (logo, title), <nav> the menu (links), <main> the main content (one per page), <footer> the bottom part (copyright, contact).

The page is divided into meaningful parts: header, nav, main, footer

Try it live below (the colors set the parts apart; like ordinary blocks, they stack top to bottom):

Why semantic: a search engine (Google) and a screen reader (for the visually impaired) understand the page structure from it. The code also becomes easier to read. It looks the same as <div>, but its meaning is clear.

section, article, aside and page structure

Inside the main content (<main>) there are more meaningful tags: <section> is a thematic section (for example "Latest news"), <article> is independent, self-contained content (a single article or blog post), <aside> is a side panel (extra links, ads). A complete page is usually built like this: header and nav at the top, main in the middle (with article and aside inside), footer at the bottom.

Inside <main> sit the main <article> and a side <aside>

Below are <article> and <aside> inside <main> (their side-by-side layout is set with CSS):

The difference: <section> is a thematic section, while <article> is self-contained (its content still makes sense if you move it to another site, for example a news item or a review).

Best Practices

Professional HTML follows a few simple rules. They make the code clean, correct and convenient for everyone:

Write tags in lowercase: <p>, not <P>.
Put attribute values in quotes: class="box".
Give every <img> a meaningful alt.
Use only one <h1> per page.
At the start of the page, include <!DOCTYPE html>, <html lang="uz">, <meta charset="utf-8">.
Use semantic tags instead of <div> whenever possible.
Keep the code tidy with nested indentation.
Always close tags and nest them correctly (in proper order).

Two pieces of code that give the same result, but a big difference in quality:

BAD<DIV><IMG src=rasm>

Uppercase, no alt, no quotes, a div is used.

GOOD<main><img src="/rasm.jpg" alt="Mountain">

Lowercase, has alt, has quotes, a semantic tag.

Why it matters: clean code reduces errors, others (and future you) read it easily, it ranks better in search engines and is convenient for people with disabilities.

Final project: a personal page

Now we'll combine everything you've learned and build a complete page. Fill in the skeleton below: add links to the menu and a list to the main part.

TaskThe page should have: <header>+<h1>, <nav>+at least one link (<a href>), <main>+a list (<ul>/<li>), and <footer>.

Congratulations! If you manage this, you'll have fully mastered the basics of HTML. The next step now is to learn CSS to make this page beautiful.

Final hands-on project

Congratulations, you've finished all the module topics of the course! Now for the most important step, the final project. Click the button below and a full-screen code studio opens: you write code on the left, and on the right there are "Sample" (the finished page you need to build) and "Result" (your live output) tabs. When the studio opens, the rest of the course is hidden so you can focus only on the project.

This button activates once you've finished all the lesson topics.

Module test

FINAL TEST

50-question final test

Final test

50 questions covering all 8 modules. To earn the certificate, answer at least 40/50 correctly.

HTML: build a web page from scratch

What is HTML?

How a web page works

What a tag is

Your first practice

Practice: reinforce

Module test

The page skeleton

The complete page skeleton

The difference between head and body

Practice: give the page a name

Practice: reinforce

Module test

Text and headings

Headings: from h1 to h6

Paragraphs: p, br and whitespace

Styles: the style attribute

Text formatting tags

Comments

Practice: a small article

Practice: reinforce

Module test

Lists and links

Lists: ul, ol and li

Links and attributes

Practice: build a menu

Practice: reinforce

Module test

Images and media

Adding an image: img

Size and other media

Embedding a YouTube video

Practice: give the image an alt

Practice: reinforce

Module test

Tables and forms

Table: table, tr, th, td

Merging cells: colspan, rowspan

Forms and input types

textarea, radio, checkbox, select

Practice: add a comment field to the form

Practice: reinforce

Module test

Structure: div, span, class, id

div: grouping elements

span and block/inline elements

class and id: giving a label

Practice: build a card

Practice: reinforce

Module test

Semantic HTML and the final project

Semantic tags: header, nav, main, footer

section, article, aside and page structure

Best Practices

Final project: a personal page

Final hands-on project

Module test

50-question final test

Final test