WRITE THE
WEB.
HTML gives a browser the structure of a web page. Learn how elements, tags and attributes fit together, then change real code and watch the result appear.
Structure, not decoration.
HTML stands for HyperText Markup Language. It describes the structure and meaning of content so a browser knows what parts are headings, paragraphs, links, lists and more.
H = HyperText
Text can connect to other pages or resources using links.
M = Markup
Special tags mark the role of content, rather than simply changing how it looks.
L = Language
HTML uses a standard set of elements and attributes that browsers understand.
HTML vs CSS vs JavaScript
What is on the page?
How does it look?
What does it do?
Read the skeleton.
A complete HTML document usually has a document type declaration, an html element, a head section for metadata, and a body section for visible page content.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Hello!</h1> <p>Welcome to my page.</p> </body> </html>
Give an element extra information.
Attributes are written inside an opening tag and usually use the form name="value".
Attribute: href
Value: page2.html
| Element | Attribute | Purpose |
|---|---|---|
<a> | href | Where the link points. |
<img> | src | Where the image resource comes from. |
<img> | alt | Text description of the image. |
<input> | type | What kind of input control it is. |
| Many elements | id | Gives an element a unique identifier within the page. |
Write it. Render it.
The editor uses a sandboxed preview. Your code is rendered locally inside the page, without sending it to a server.
Lists and tables have their own pattern.
HTML often describes relationships between pieces of content. Lists and tables are good examples.
Unordered list
<ul> <li>Maths</li> <li>Science</li> </ul>
- Maths
- Science
Simple table
<table> <tr> <th>Name</th> <th>Score</th> </tr> </table>
| Name | Score |
|---|---|
| Riya | 92 |
| Aman | 87 |
Translate the idea into code.
Each challenge accepts up to three attempts. Once solved or locked, the answer is revealed.
Fast recall.
Flip the cards, explain the rule in your own words, then reshuffle.
Teach the chapter like a briefing.
Step through the core ideas, then jump back to the playground for a live demonstration.
Three attempts. Then reveal.
Fresh questions cover tags, attributes, document structure, nesting and the difference between HTML, CSS and JavaScript.