In all kinds of documents, structure is very important in helping
readers to understand the messages you are trying to convey
and to navigate around the document. So, in order to learn how
to write web pages, it is very important to understand how to
structure documents.
Structuring Word Documents
The use of headings and
subheadings in any document
often reflects a hierarchy of
information. For example, a
document might start with
a large heading, followed by
an introduction or the most
important information.
This might be expanded upon
under subheadings lower down
on the page. When using a word
processor to create a document,
we separate out the text to give
it structure. Each topic might
have a new paragraph, and each
section can have a heading to
describe what it covers.
On the right, you can see a
simple document in Microsoft
Word. The different styles for
the document, such as different
levels of heading, are shown
in the drop down box. If you
regularly use Word, you might
have also used the formatting
toolbar or palette to do this.
HTM L Describes the Structure of Pages
The HTML code (in blue) is made up of characters that live inside angled
brackets — these are called HTML elements. Elements are usually
made up of two tags: an opening tag and a closing tag. (The closing tag
has an extra forward slash in it.) Each HTML element tells the browser
something about the information that sits between its opening and
closing tags.
Body, Head & Title
You met the element
in the first example we created.
Everything inside this element is
shown inside the main browser
window.
Before the element you
will often see a element.
This contains information
about the page (rather than
information that is shown within
the main part of the browser
window that is highlighted in
blue on the opposite page).
You will usually find a
element inside the
element.
The contents of the
element are either shown in the
top of the browser, above where
you usually type in the URL of
the page you want to visit, or
on the tab for that page (if your
browser uses tabs to allow you
to view multiple pages at the
same time).
## Comments in HTML
If you want to add a comment
to your code that will not be
visible in the user's browser, you
can add the text between these
characters:
It is a good idea to add
comments to your code because,
no matter how familiar you
are with the page at the time
of writing it, when you come
back to it later (or if someone
else needs to look at the code),
comments will make it much
easier to understand.
Although comments are not
visible to users in the main
browser window, they can be
viewed by anyone who looks at
the source code behind the page.
On a long page you will often
see comments used to indicate
where sections of the page start
or end, and to pass on notes to
help anyone who is looking at
the code understand it.
Comments can also be used
around blocks of code to stop
that code from being displayed
in the browser. In the example on
the left, the email link has been
commented out.
##
The element lives
inside the element and
contains information about that
web page.
It is not visible to users but
fulfills a number of purposes
such as telling search engines
about your page, who created
it, and whether or not it is time
sensitive. (If the page is time
sensitive, it can be set to expire.)
The element is an empty
element so it does not have a
closing tag. It uses attributes to
carry the information.
The most common attributes
are the name and content
attributes, which tend to be
used together. These attributes
specify properties of the entire
page. The value of the name
attribute is the property you
are setting, and the value of the
content attribute is the value
that you want to give to this
property.
In the first line of the example on
the opposite page, you can see a
element where the name
attribute indicates an intention
to specify a description for the
page. The content attribute is
where this description is actually
specified.
The value of the name attribute
can be anything you want it to
be. Some defined values for this
attribute that are commonly
used are:
description
This contains a description
of the page. This description
is commonly used by search
engines to understand what the
page is about and should be a
maximum of 155 characters.
Sometimes it is also displayed in
search engine results.
keywords
This contains a list of commaseparated
words that a user
might search on to find the page.
In practice, this no longer has
any noticeable effect on how
search engines index your site.
robots
This indicates whether search
engines should add this page
to their search results or not. A
value of noindex can be used if
this page should not be added. A
value of nofollow can be used
if search engines should add this
page in their results but not any
pages that it links to.
## New Html 5 Layout Elements
HTML5 introduces a new set of elements that allow you to divide up the
parts of a page. The names of these elements indicate the kind of content
you will find in them. They are still subject to change, but that has not
stopped many web page authors using them already.
Headers & Footers