HTML
Live guidesThe skeleton of every web page
HTML (HyperText Markup Language) describes the structure and meaning of web content — headings, paragraphs, links, images, and landmarks — so browsers and assistive tools know what each part of a page is.
Visual memory: HTML is the skeleton. CSS is the clothing. JavaScript is the muscle.
Concept graph: 142 interconnected HTML concepts — guides, interview, cheatsheet, projects, career, lessons, and glossary hang from this hub.
Your first structured page
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello HTML</title>
</head>
<body>
<h1>Welcome</h1>
<p>This page is structured with HTML.</p>
</body>
</html>Live output
Visual explanation
The browser reads tags, builds a document tree (DOM), then paints text. No CSS framework required for this structure.
Concept graph
Every concept knows its parents, children, prerequisites, related ideas, projects, and lessons — a real knowledge graph, not a flat page list.
Foundations
- HTML
- Markup language
- HTML tags
- Opening tag
- Closing tag
- Self-closing / void elements
- HTML elements
- Nesting elements
- Empty / void elements
- Block vs inline
- Attributes
- Global attributes
- Boolean attributes
- data-* attributes
- id attribute
- class attribute
- title attribute
- lang attribute
- hidden attribute
- Web page
- Web browser
- URL
- How browsers render HTML
- DOM
- HTML + CSS relationship
- HTML + JavaScript relationship
Document
Text
Links & media
Lists & tables
Forms
- Forms
- <form>
- method & action
- <label>
- <input>
- Input types
- type="text"
- type="email"
- type="password"
- type="number"
- type="checkbox"
- type="radio"
- type="file"
- type="date"
- <textarea>
- <select> & <option>
- Buttons
- submit / reset / button
- <fieldset> & <legend>
- required attribute
- disabled attribute
- checked attribute
- placeholder
- name attribute (forms)
Semantic
Accessibility & SEO
Advanced
Skills in this hub
- Semantic HTML
- Document Structure
- Accessibility basics
- Forms & tables