HTML Building Blocks
Loading simulation…
flagWhat you'll discover
- arrow_forwardWrite opening and closing tags that wrap content
- arrow_forwardAdd a heading, paragraph, image and list to a page
- arrow_forwardUnderstand what the browser does with your tags
- arrow_forwardUse attributes like src and alt inside a tag
Tags are labelled containers
HTML — HyperText Markup Language — describes what each piece of a page IS. You wrap content in tags: <h1>Hello</h1> says "this is a top-level heading", <p> marks a paragraph, <ul> with <li> items makes a bullet list. Most tags come in pairs: an opening tag and a closing tag with a slash. Think of them as labelled boxes — the browser reads the label and displays the contents the right way. Forget a closing tag and the browser has to guess where your box ends!
Some tags stand alone
A few tags do not wrap anything, so they have no closing partner. The image tag is the famous one: <img src="picture.png" alt="my photo"> places a picture. The extra pieces inside the tag are attributes — settings written as name="value". The src attribute says where the picture lives, and alt provides words that screen readers speak aloud for blind users, and that appear if the image fails to load. Good alt text makes the web work for everyone — accessibility is a real superpower.
The browser is your translator
When you press Run, the browser reads your HTML from top to bottom and builds the page — big bold text for headings, spaced blocks for paragraphs, bullets for list items. Notice what HTML does NOT control: colours, fonts and fancy layouts. HTML is purely about meaning and structure. The decoration comes from CSS, which you will meet in the next lesson. Keeping structure (HTML) separate from style (CSS) is exactly how professional websites are organised.