HTML structure — Computing, 11–13
How a web page marks what each piece of content is. Computing, 11–13 years.
Idea
HTML gives a web page a structure that a browser can understand. Tags mark roles such as heading, paragraph, link or image, instead of merely describing how letters should look. The browser reads that structure and turns it into the page you see, while other tools can use the same meaning.
Why
A page made only of visual instructions is hard for browsers, search tools and screen readers to interpret. HTML was developed to solve the problem of sharing documents across different computers while keeping their structure meaningful. Separating structure from decoration also makes one page easier to adapt to a phone, a large screen or spoken output.
Worked example
To make a tiny page, start with a heading tag around “My Garden”. Add a paragraph tag around “Three sunflowers are open.” Then add a link tag with words such as “See the map” and a destination address. The browser uses the tags to show a heading, ordinary text and a clickable link in the right roles.
Common trap
A common, understandable mistake is using a heading tag only because it makes text look large. That seems sensible when you are focusing on the visible result, but a heading also tells tools that the text is an important section title. Use structure for meaning, then use styling to control size, colour and spacing.
Where it appears
HTML is the underlying structure of news pages, online shops, school sites and game pages. Search engines use its headings and links to understand what a page contains, and screen readers use its roles to speak the page in a useful order. You can inspect this structure in a browser’s developer tools.
Keep exploring
Other languages
Loading MyLeoNes™…