Code html

Hypertext mark-up language (html) is the language in which much of the web is written.

Most sites now use content management systems (CMSs) and the coding is done at the click of a button (bold, bullet points etc).

Some CMSs have fewer button functions and you need to be able to write the original html code. It is always useful to know how to code the basics anyway, for replying to others’ blogs, for example.

WordPress limitations

In WordPress, for instance, there is no anchor button. You can add one using the plug-in WP-Edit on WordPress. Or you can write the necessary code to create an anchor.

An anchor is a point you create in the text of a page that enables you to link to it. This can be used for page navigation, such as offering an A-Z set of choices, so your readers can jump from one section to another and back again, reading your text in their chosen order. An example of this in the CV index on my About page.

It also means you can give a link to a specific section within a page. The link above takes you to that CV menu, but you could also link, for example, to the section about my work for The Guardian.

How anchors work

It is easiest to explain using the A-Z model. Below is a blank A-Z table and basically the text for is show. If you click on the html tab within WordPress and put in this code , you can then switch back to visual editor and start adding your information under each letter.

A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

The code for this is:

<a href=”#a”>A</a>|<a href=”#b”>B</a>|<a href=”#c”>C</a>|<a href=”#d”>D</a>|<a href=”#e”>E</a>|<a href=”#f”>F</a>|<a href=”#g”>G</a>|<a href=”#h”>H</a>|<a href=”#i”>I</a>|<a href=”#j”>J</a>|<a href=”#k”>K</a>|<a href=”#l”>L</a>|<a href=”#m”>M</a>|<a href=”#n”>N</a>|<a href=”#o”>O</a>|<a href=”#p”>P</a>|<a href=”#q”>Q</a>|<a href=”#r”>R</a>|<a href=”#s”>S</a>|<a href=”#t”>T</a>|<a href=”#u”>U</a>|<a href=”#v”>V</a>|<a href=”#w”>W</a>|<a href=”#x”>X</a>|<a href=”#y”>Y</a>|<a href=”#z”>Z</a>

<a name=”a”></a>A
<a name=”b”></a>B
<a name=”c”></a>C
<a name=”d”></a>D
<a name=”e”></a>E
<a name=”f”></a>F
<a name=”g”></a>G
<a name=”h”></a>H
<a name=”i”></a>I
<a name=”j”></a>J
<a name=”k”></a>K
<a name=”l”></a>L
<a name=”m”></a>M
<a name=”n”></a>N
<a name=”o”></a>O
<a name=”p”></a>P
<a name=”q”></a>Q
<a name=”r”></a>R
<a name=”s”></a>S
<a name=”t”></a>T
<a name=”u”></a>U
<a name=”v”></a>V
<a name=”w”></a>W
<a name=”x”></a>X
<a name=”y”></a>Y
<a name=”z”></a>Z

Grab this as a text file

You can use this code for any page navigation. I used it on the About page for my CV. You just use as few or as many as you need (I used A-N) and change the navigation links to whatever you want.

Back link

It is usually worth having at least a back to top or back to index link (or both) regularly throughout your text too.

You might also want to change the lower case letter used to create the anchors. If you use a proper name or word, that will be what appears in the url.

The url of the Guardian section of my CV is www.chriswheal.com/aboutme/#f

I could have changed the “f” to guardian and the url would have been www.chriswheal.com/aboutme/#guardian, which would have looked more professional.