HSHimanshu Sharma
HTML

Learn HTML from scratch: what to study first, with a free 31-lesson course

Himanshu Sharma · · 6 min read

Advertisement

Every web page you have ever visited is built on HTML. It is not a programming language and it is not hard, but beginners still waste weeks on it, usually because they learn things in a poor order or only ever read about HTML without writing any. This guide is the order I would follow, the mistakes I see most often, and a pointer to the free HTML course on this site if you want lessons you can try in the browser.

What HTML actually does

HTML describes the structure and meaning of content. A heading is marked as a heading, a list as a list, a link as a link. The browser then displays it, and other software, such as search engines and screen readers, can understand it. HTML does not decide colours or layout; that is the job of CSS, which is the next thing to learn once the structure is solid. If you want the story of how this division came about, the history of HTML, CSS and MySQL has a dated timeline.

An HTML page is made of elements. Most have an opening tag, some content and a closing tag:

<h1>My first page</h1>
<p>This is a paragraph with a <a href="https://example.com">link</a>.</p>

Elements can carry attributes, such as the href above, which give extra information. That is the whole idea. The rest is learning which elements exist and when to use each.

The order I would learn it in

1. A page that works

Start with the smallest valid page, and learn what the browser does with it. The lesson What HTML is and how a browser reads it and Build your first web page take you from an empty file to something in a browser tab. Then learn elements, tags and nesting and attributes. These four ideas are the grammar of everything else.

2. Text, links and lists

Most pages are text. Learn headings and paragraphs, links and lists. Use headings for structure, not to make text big. A good test is whether the outline of the page still makes sense if you read only the headings.

3. Images

Learn images, and in particular the alt attribute. It is the text that is read to people who cannot see the picture, shown when the image does not load, and used by search engines. Write it for a person: describe what matters about the image, and leave it empty only when the image is purely decoration.

4. Page structure and semantics

This is the step that separates tidy HTML from a pile of div elements. Learn header, nav, main and footer, then semantic HTML. Instead of wrapping everything in a generic box, choose the element that says what the content is. It costs nothing, and it helps accessibility and search.

5. Tables and forms

Tables are for data, not layout. Forms are where HTML becomes interactive, and they are also where accessibility is most often forgotten. Read tables, then your first form, input types, labels and accessible forms and built-in validation. Every input needs a label. That one habit makes a form usable with a keyboard and a screen reader.

6. The things around the page

Finally the parts people do not see: the head and meta tags, HTML for search engines and accessibility basics. Then finish with a project: your own profile page.

Mistakes I see again and again

  • Using headings for size. Choose the heading level by the structure of the content, and change how it looks with CSS later.
  • Skipping alt text. Either describe the image or leave alt="" on purpose when it is decorative. Never leave the attribute out.
  • Building everything from div elements. If an element exists for the job, such as nav, button or ul, use it. A div styled to look like a button does not work with a keyboard.
  • Using tables for layout. That was common in the 1990s and it is the wrong tool today.
  • Forgetting labels on form fields. A placeholder is not a label. It disappears when you type.
  • Never opening the page at a small width. Even before you know CSS, you can resize the browser and see how plain HTML behaves.
  • Copying without understanding. If you paste a snippet, change something and predict what happens before you refresh.

How to practise

Reading about HTML is the least effective way to learn it. These work better:

  1. Type it. Write each example into a file, save it and open it in the browser. Typing makes you notice small details.
  2. Use a live editor. In the course, every code example can be edited right in the page and you see the result at once. If you want a quick scratchpad of your own, the HTML viewer tool previews HTML in an isolated frame without uploading anything.
  3. Rebuild a page you like, using only the text and structure at first. Ignore the visuals.
  4. Break it on purpose. Delete a closing tag, misspell an attribute, nest elements wrongly. HTML is forgiving, so the browser will try to cope, and watching how it copes teaches you a lot.
  5. Check with the keyboard. Press Tab through your page. If you cannot reach or use something, a screen reader user could not either.

What the free course gives you

The HTML course has 31 short lessons in seven sections, from "What HTML is" to a finished profile page. Each lesson has a live editor, a list of common mistakes, a quiz and an exercise with a worked answer. At the end there is a final exam, and passing it gives you a certificate you can share. You can read everything without an account; a free learner account only saves your progress.

If you are planning the whole journey, the roadmap for HTML, CSS and MySQL shows how long each stage takes at a gentle pace and what to build at each step. When you can write a clean page without copying, move on to CSS to give it a look. If you spot something unclear or wrong in a lesson, please let me know.

Advertisement