library / Web Hosting Articles / HTML articles
- Forms
- Getting Started
- Headings
- Images
- Links
- Lists
- Page Titles
- Paragraphs
- Tables
- Tags, Attributes, and Elements
Headings
They are h1
, h2
, h3
, h4
, h5
and h6
, h1
being the almighty emperor of headings and h6
being the lowest pleb.
Change your code to the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> </head> <body> <h1>My first web page</h1> <h2>What this is</h2> <p>A simple page put together using HTML</p> <h2>Why this is</h2> <p>To learn HTML</p> </body> </html>
Note that the h1
tag is only used once - it is supposed to be the main heading of the page and shouldn't be used multiple times.
h2
to h6
however, can be used as often as you desire, but they should always be used in order, as they were intended. For example, an h4
should be a sub-heading of an h3
, which should be a sub-heading of an h2
.
Links
An anchor tag (a
) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
Add this to your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> </head> <body> <h1>My first web page</h1> <h2>What this is</h2> <p>A simple page put together using HTML</p> <h2>Why this is</h2> <p>To learn HTML</p> <h2>Where to find the tutorial</h2> <p><a href="http://www.htmldog.com">HTML Dog</a></p> </body> </html>
The destination of the link is defined in the href
attribute of the tag. The link can be absolute, such as "http://www.htmldog.com", or it can be relative to the current page.
So if, for example, you had another file called "flyingmoss.html" then the line of code would simply be <a href="flyingmoss.html">The miracle of moss in flight</a>
or something like this.
A link does not have to link to another HTML file, it can link to any file anywhere on the web.
A link can also send a user to another part of the same page they are on. You can add an id
attribute to just about any tag, for example <h2 id="moss">Moss</h2>
, and then link to it by using something like this: <a href="#moss">Go to moss</a>
. Selecting this link will scroll the page straight to the element with that id.
The a
tag allows you to open the link in a newly spawned window, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn't take the user away from your site.
There are a number of reasons why you shouldn't do this however.
From a usability point of view, this method breaks navigation. The most commonly used navigation tool on a browser is the "back" button. Opening a new window disables this function.
On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a link in a new window then they can choose to do so themselves.