How Pages Use Structure
Think about the stories we read in a newspaper: for each story, there will be a headline, some text, and possibly some images. There may be subheadings that split the story into separate sections or quotes from those involved if the article is a long piece. The structure always helps readers understand the stories in the newspaper.
When a news story is viewed online the structure is very similar. This is explained on the right with a copy of a newspaper alongside the corresponding article on its website.
Think about a very different type of document, for example, an insurance form. Often, the insurance forms have headings for different sections, and each section contains a list of questions with areas for us to fill in details or checkboxes to tick. Again, the structure is very similar online.
Structuring Word Documents
In any document, the use of headings and subheadings often reflects a hierarchy of information. For instance, a document might start with a large heading, followed by an introduction or the most important information.
This may be expanded upon under subheadings lower down on the page. We separate out the text to give it structure when using a word processor to create a document. Every topic may have a new paragraph, and each section can have a heading to describe what it covers.
We may see on the right a simple document in Microsoft Word. In the drop-down box, the different styles for the document for instance different levels of heading are shown. We might have also used the formatting toolbar or palette to do this if we regularly use Word.
HTML Describes the Structure of Pages
We may see a web page in the browser window that features exactly the same content as the Word document. We add code to the words we want to appear on the page to describe the structure of a web page. We can see the HTML code for this page below. Don’t worry about what the code means yet.
<html> <body> <h1>This is the Main Heading</h1> <p>This text may be an introduction to the rest of the page. It may be split up into several sub-headings if the page is a long one.<p> <h2>This is a Sub-Heading</h2> <p>Many long articles have sub-headings so to help we follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p> <h2>Another Sub-Heading</h2> <p>Here we can see another sub-heading.</p> </body> </html>
Each HTML element tells the browser something about the information that sits between its opening and closing tags.
The HTML Uses Elements to Describe the Structure of Pages
Let’s see closer at the above code. There are several different elements. Every element has an opening tag and a closing tag. Tags act like containers. They tell us something about the information that lies between their opening and closing tags.
Attributes Tell Us More About Elements
Additional information is being provided about the contents of an element. They are made up of two parts and appear on the opening tag of the element: a name and a value, separated by an equal sign. The attribute name indicates what kind of extra information we are supplying about the element’s content. It should be written in lowercase.
The value is the information/setting for the attribute. It should be placed in double-quotes. Different attributes can have different values. An attribute here called lang is used to indicate the language used in this element.
The HTML5 allows us to use uppercase attribute names and omit the quote marks, but this is not recommended. The majority of attributes may only be used on certain elements, although a few attributes can appear on any element.
Most attribute values follow a stipulated format or are pre-defined. As we introduce each new attribute we will look at the permitted values.
The value of the lang attribute is an abbreviated way for a specification which language is used inside the element that all browsers understand.
Body, Head & Title
<html> <head> <title>This is the Title of the Page</title> </head> <body> <h1>This is the Body of the Page</h1> <p>Within the body of a web page is displayed anythin in the main browser window.</p> </body> </html>
Before the <body> element we will often see a <head> element. This contains information about the page. We will usually find a <title> element inside the <head> element.
The contents of the <title> element are either shown at the top of the browser, above where we usually type in the URL of the page we want to visit, or
on the tab for that page (if our browser uses tabs to allow us to view multiple pages at the same time).