Structure, presentation and behaviour, and HTML

Overview

Recall questions on the head and body of an HTML page, the title, link, heading, img, a, div, list, form and script elements, reading markup, semantic structure, and how HTML, CSS and JavaScript separate structure, presentation and behaviour.

What you need to know

Answer each one before you reveal it.

Questions from this subtopic

Each one with the model answer underneath.

1. 1

   What does a browser do with the head of a document as opposed to the body?

   Model answer

   The head holds information about the page rather than content to be displayed in it: the title, links to stylesheets, and scripts. Nothing in it is rendered in the page area. The body holds everything the user actually sees - the headings, paragraphs, lists, images, links and forms - and the browser lays that out and draws it in the window. Splitting them means the browser can start fetching stylesheets and preparing to render before it has read the content.

2. 2

   What does the title element do, and where does its text appear?

   Model answer

   It gives the document its name. The text does not appear in the page itself; the browser shows it in the tab or window title bar. It is also what is used when the page is bookmarked, what a search engine typically shows as the clickable heading of a result, and what a screen reader announces when the page opens - so a title that describes the specific page rather than just the site name matters for both usability and search.

3. 3

   What is the link element used for in the head of a page?

   Model answer

   It attaches an external resource to the document, and its main use is to link the page to an external CSS stylesheet. Putting one link element in each page means every page shares one stylesheet, so the whole site is styled consistently from a single file and the browser can cache that file and reuse it across pages.

4. 4

   The heading elements h1, h2 and h3 make text bigger and bolder. Why is choosing among them not just a decision about size?

   Model answer

   Because they express the document's structure, not its appearance. A first-level heading is the main heading of the page, a second-level heading is a section within it, a third-level heading a subsection within that - they form an outline that describes how the content is organised. Screen readers use that outline to let a user jump between sections, and search engines use it to judge what the page is about and which parts matter. If size were the only concern, CSS could make any element any size; choosing the heading level by appearance rather than by meaning produces a page that looks right but whose structure is nonsense to anything that is not a pair of eyes.

5. 5

   An img element can carry src, alt, height and width. What is each for, and why does one of them matter more than authors think?

   Model answer

   src gives the location of the image file to display. height and width give the dimensions in which to display it, which also lets the browser reserve the right amount of space before the image has downloaded so the page does not jump about as it loads. alt gives alternative text describing the image. alt matters more than authors expect because it is what a screen reader announces to a blind user, what is displayed if the image fails to load or images are switched off, and what search engines use to understand the picture - so an image carrying meaning needs alt text that conveys that meaning rather than a filename.

6. 6

   What does the a element with its href attribute do?

   Model answer

   It creates a hyperlink. The href attribute holds the address of the destination - another page on the same site, a page on another site, or a resource such as a file - and the content between the opening and closing tags is the clickable text or image the user sees. Clicking it makes the browser request the address in href and display what comes back. These links are also what web crawlers follow to discover new pages, and what carries importance between pages in link-based ranking.

Other ways to work this

The same content, four other ways.

What is inside Levo

Six ways to work the same material.