1.3.4 - HTML structure and CSS styling

The structure of an HTML document

HTML is a markup language: tags identify elements such as a heading or paragraph rather than giving a procedural sequence of instructions. Most elements have an opening tag, content and a closing tag. Correct nesting means the element opened last closes first. Some elements, including img, input and link, are void elements and have no closing tag.

The html element contains the document. Its head contains metadata and resource links; its body contains the page content. title in the head gives the document title, typically used in the browser tab. It is different from a visible heading in the body. h1, h2 and h3 express successive heading levels; p expresses a paragraph; div groups content so it can be addressed or styled. A div does not itself mean “heading” or “paragraph”.

This complete small page needs no external files. <!doctype html> tells the browser to use modern HTML document handling; it is a declaration, not one of the paired elements. Save it as club.html in a local text editor and open that file in a browser to see the difference between the tab title and the visible heading.

<!doctype html>
<html>
<head>
  <title>Campus chess club</title>
</head>
<body>
  <h1>Chess club</h1>
  <div class="infoBox">
    <h2>Weekly meetings</h2>
    <p>Meet in room 12 on Tuesday.</p>
    <h3>Bring with you</h3>
    <p>A notebook for recording games.</p>
  </div>
</body>
</html>

The indentation shows the nesting, but the tags define it. Closing the div before its final paragraph would place that paragraph outside the group, changing which styling rules can target it. A browser can attempt to recover from malformed markup; seeing a plausible page is not proof that the intended structure is correct.

Links, images and lists

An attribute adds information in an opening tag. In <a href="rules.html">Read the rules</a>, href names the link's destination and the element's text is what the user can select. A relative address such as rules.html is resolved relative to the current document location; an absolute URL names its full destination. A link is not an image: href is not the attribute that supplies an image file.

An image uses src for its source and alt for a text alternative. height and width specify dimensions; in the following HTML attributes these numeric values are pixel dimensions. This static attribute example describes an illustrative 400 by 240 pixel image named campus.png; it does not supply that image file or depend on seeing its pixels:

<img src="campus.png" alt="Campus entrance beside the library"
     width="400" height="240">

If the source cannot load, the alternative text conveys the relevant meaning and can also support users of assistive technology. The file name alone is rarely a useful description. Setting unrelated height and width proportions can distort an image; setting a smaller display size does not reduce the original downloaded file size.

ol contains an ordered list, ul an unordered list, and each item is a li. Choose order when the sequence matters. These independent snippets contrast a preparation sequence with a collection of available facilities:

<ol>
  <li>Collect a visitor badge.</li>
  <li>Meet the guide.</li>
</ol>
<ul>
  <li>Library</li>
  <li>Sports hall</li>
</ul>

Each list item belongs inside its list element. Writing two paragraphs that begin with typed “1.” and “2.” can look similar, but does not express the same list structure. Choose meaningful markup before changing its appearance.

Forms and script resources

A form groups controls that can submit user data. An input with type="text" makes a text box; type="submit" makes a submit control. A text input's name identifies its submitted field. It is not merely the caption shown beside the box. Text written before the input is visible text; an input's current value is the data the user entered.

In this example, the server route and submission method are explicitly supplied. The action attribute identifies where the form submits. method="get" places the submitted name/value data in the request URL's query. These attributes are introduced here; an unfamiliar element or attribute used in an examination question must be explained by that question. value on the submit control supplies its displayed text.

<form action="/search" method="get">
  Search term:
  <input type="text" name="term">
  <input type="submit" value="Search">
</form>

If the user enters robot, this arrangement submits a field equivalent to term=robot to /search. The field name is term, not text or Search. The server decides how to process it and what response to return. A text box is not automatic proof that the data is valid or safe. method="post", introduced as an alternative, sends form data in a request body; it does not itself encrypt it. A protected connection is a separate requirement for confidentiality in transit.

A script element contains or loads JavaScript. With <script src="club.js"></script>, the browser loads the named script file; the closing tag is still needed. Placing a script after the elements it accesses is one way to ensure they exist when the script runs. HTML names and contains the content, CSS styles it, and JavaScript can change content or respond to events. Merely linking a script does not run the code on the web server: the browser runs this page script on the client.