HTML and CSS: how a page is built
Computer Science · Key Stage 2 · The School
Tags describe meaning
HTML marks up MEANING: <h1> is the main heading, <p> a paragraph, <ul><li> a list, <a href> a link. Most tags come in pairs that wrap their content. Choosing the tag that matches the meaning — not the one that looks right — is what makes a page work for search engines and screen readers.
CSS is appearance
HTML says "this is a heading"; CSS says "headings are dark green and 2rem tall". Keeping them separate means you can restyle a whole site without touching the content, and change the content without breaking the design. That separation is one of the best ideas in computing.
Look at a real page
Right-click any page and choose Inspect. You are looking at the real HTML and CSS of a live site — you can even change it temporarily and watch the page react. Nothing you do there affects anyone else; it is the safest and fastest way to learn how real pages are built.