HTML Tutorial

HTML Introduction

HTML is markup, not a programming language. It names headings, paragraphs, and links so a browser can draw a document — a clinic page, a lab report, a menu.

← HTML Home HTML Editors →

What is HTML?

HTML stands for HyperText Markup Language. It is not a programming language. It does not calculate Ohm’s law or loop through marks. It marks up a document so a browser knows what is a heading, what is a paragraph, what is a link, and what is an image.

Every site you open is HTML at the bottom — even when a framework or a Python backend generated it. A clinic hours page, a titration table, and a cafe menu are the same idea: name the pieces, then let CSS paint them. Learn HTML first and the rest of the web stack makes sense.

A first page

This is a complete HTML document that already looks like a page someone would publish. Copy it into the live preview and change the current. The heading stays a heading; only the number moves.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ammeter reading · Riverside lab</title>
</head>
<body>
  <h1>Ammeter reading</h1>
  <p>Current I = 0.45 A</p>
  <p>Taken before the load was connected.</p>
</body>
</html>

Click Try it in HTML under the example. That opens /html/try — a live page preview.

What HTML is for

Structure: headings, paragraphs, lists, tables, forms
Links between pages and to other sites
Images, audio, and video
A document outline search engines and screen readers can read

Appearance (colors, fonts, layout) is CSS. Behavior (clicks, live updates) is JavaScript. HTML is the skeleton both attach to.

Tags and elements

Most HTML is written as a start tag, content, and an end tag. Together they are an element.

Example

<p>Current I = 0.45 A — this whole line is a paragraph element.</p>

<p> is the start tag. </p> is the end tag. Some elements, such as<img> and <br>, have no content and no end tag.

How a browser uses HTML

It reads the file from top to bottom.
It builds a tree of elements (the DOM).
It applies CSS, then paints the page.

If a tag is missing or misspelled, the browser often guesses. That does not mean the page is correct. Write a doctype, an html root, a head, and a body every time.

HTML vs Python on StudyGrid

	Python track	HTML track
Dashboard	Python home and tutorial index	HTML studio at /html
Editor	/try — prints and plots	/html/try — live page
Result	Output text and charts	A rendered document
File	.py	.html

What you will cover

Documents, elements, and attributes
Text, links, images, tables, and lists
Layout regions and semantic tags
Forms and input types
Canvas, SVG, video, and web storage

Next: how to write HTML in an editor, then your first complete document.

Worked examples

The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.

HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.

Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.

Physics

A lab notebook page

HTML is markup, not a calculator. It does not compute current. It names the pieces of a document so a browser can draw a heading, a reading, and a unit on one page.

A first useful page is a notebook line: what you measured, the number, and the unit. Without the unit, 0.45 is not a current.

I = Q / t

Example

<article>
  <h1>Ammeter reading</h1>
  <p>Current I = 0.45 A</p>
  <p>Taken at the start of the run, before the load was connected.</p>
</article>

Maths

Name a 3-4-5 triangle

A right triangle with legs 3 and 4 has hypotenuse 5 because 9 + 16 = 25. The page does not prove Pythagoras. It publishes the three sides so a student can see them together.

That is what HTML is for at this scale: a title, then the facts under it. Later chapters compute. This chapter only structures.

a² + b² = c²

Example

<h1>Right triangle</h1>
<p>Sides: 3 m, 4 m, 5 m</p>
<p>The corner is square. Printers still use this triple on a floor.</p>

FAQ: HTML Introduction

Common questions about this page.

What is the StudyGrid HTML tutorial?

The StudyGrid HTML tutorial is a full beginner track: tags, headings, links, images, tables, layout, forms, and media. Each chapter has copy-and-run examples.

Should I run html introduction examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn html introduction in this HTML HTML lesson (HTML Introduction).

Is the HTML editor the same as Try Python?

No. Try HTML is a live page preview at /html/try. Try Python stays at /try and runs Python. HTML lessons never open the Python editor.

Do I need to install anything to learn HTML?

No. Open a chapter, click Try it in HTML, and the page preview updates in the browser. You can also download a .html file and open it locally.

Where should I start the HTML tutorial?

Start at HTML Intro, then Basic, Elements, and Attributes. After the first document, continue to headings, links, and forms. Use Next at the bottom of each chapter.

Is the HTML tutorial free?

Yes. The HTML studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.