1.html-basics.md
Quiz
~/ hackweb.dev
...
~/
/tutorials
/en/html/html-basics/edit
~ Contribute
Suggest a correction or improvement. The author reviews it before it goes live.
Loading...
en/tutorials/html/1html-basics
# HTML Basics HTML (HyperText Markup Language) is the backbone of every web page. It describes the **structure** of a document — not its styling. CSS handles visuals, JavaScript handles behavior, and HTML holds everything together. HTML (HyperText Markup Language) is the backbone of every web page. It describes the **structure** of a document — not its styling. CSS handles visuals, JavaScript handles behavior, and HTML holds everything together. HTML (HyperText Markup Language) is the backbone of every web page. It describes the **structure** of a document — not its styling. CSS handles visuals, JavaScript handles behavior, and HTML holds everything together. ### Something HTML (HyperText Markup Language) is the backbone of every web page. It describes the **structure** of a document — not its styling. CSS handles visuals, JavaScript handles behavior, and HTML holds everything together. HTML (HyperText Markup Language) is the backbone of every web page. It describes the **structure** of a document — not its styling. CSS handles visuals, JavaScript handles behavior, and HTML holds everything together. HTML (HyperText Markup Language) is the backbone of every web page. It describes the **structure** of a document — not its styling. CSS handles visuals, JavaScript handles behavior, and HTML holds everything together. ## Document structure Every HTML page follows the same skeleton: ```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Page</title> </head> <body> <h1>Hello, world!</h1> </body> </html> ``` - `<!doctype html>` tells the browser this is modern HTML. - `<head>` holds metadata (title, charset, links to styles). - `<body>` holds everything visible on the page. ## Elements and tags An **element** is made of an opening tag, content, and a closing tag: ```html <p>This is a paragraph.</p> ``` Some elements are **void** (no closing tag), like images and line breaks: ```html <img src="cat.png" alt="A cat" /> <br /> ``` ## Attributes Attributes add extra info to an element. Every attribute follows `name="value"`: ```html <a href="https://example.com" target="_blank">Visit</a> ``` ## Semantic HTML Use elements that describe their *meaning*, not just their look: - `<header>` for the top of a page - `<nav>` for navigation links - `<main>` for the main content - `<article>` for a self-contained piece of content - `<footer>` for the bottom of a page Semantic HTML helps accessibility, SEO, and your own sanity when debugging.
Submit suggestion
cancel