Cyderize.org

Cyderize.org is my personal website, started in 2011 which I use to write about computers, the Internet, electronics, music, and whatever else I feel like. I'm a computer nerd and musician, residing in Melbourne, Australia.

Read the About page to find out more.

Web Development Tutorial Part 3 – More HTML

Posted September 16th, 2014 by

So having completed both Part 1 and Part 2 of this series of web development tutorials, we can now move on to investigate more interesting HTML elements.

Text-level semantics

Text-level semantic elements allow us to describe the meaning of text content in our document. We can say that some particular words are more important than others, that a line break should go here, that this bit here is a quote, etc. We won’t be discussing all of the elements that can be used, but we’ll cover the most important.

The anchor element

The anchor element is represented by the ‘a’ tag, and is displayed as a hyperlink which can lead to other webpages – creating that web of links you’ve heard that’s world-wide. The anchor element has a ‘href’ attribute which indicates the webpage to link to. It’s used like this:


<a href="someotherpage.html">This link takes you to some other page</a>

Note that the referenced webpage can be specified using either a relative URL or an absolute URL. In the case above, it’s a relative URL, so if you’re on the ‘http://www.cyderize.org/test/page.html’ and you click on the link above, you’ll be taken to ‘http://www.cyderize.org/test/someotherpage.html’. A leading forward slash (/) will specify a link relative to the root of the website (if we changed the ‘href’ to ‘/someotherpage.html’, we’d be taken to ‘http://www.cyderize.org/someotherpage.html’), and if the ‘href’ begins with ‘http://’, it’ll indicate an absolute website address (if we changed the href to ‘http://www.example.com’, we’d go exactly to that URL).

Let’s assume we’re on ‘http://www.cyderize.org/test/page.html’. Then we have:


<a href="relative.html">This link takes you to 'http://www.cyderize.org/test/relative.html'</a><br>
<a href="/root.html">This link takes you to 'http://www.cyderize.org/root.html'</a><br>
<a href="http://www.example.com/somepage.html">This link takes you to 'http://www.example.com/somepage.html'</a>

Remember that <br> is a line break right? Well, you already know what it’s going to do then. Use it to insert a forced line break. <wbr> represents a place where a line break ‘could’ be used, perhaps to increase readability when splitting text.

Emphasis and strength

Now we’ll look at the emphasis element, which has the tag <em>. It’s used to denote text that should be emphasised, and as such, is displayed in italics on most browsers. Those who have used older versions of HTML will probably be familiar with the <i> tag, for italic text. It’s preferable to use <em> for text-emphasis, since it gives information about the text – it should be italic because it’s been emphasised. The <i> tag just says ‘make this italic’, which is really a part of presentation, not semantics.

Another element you should know about is the strong element, which has the tag <strong>. It’s used to denote text that is more important than it’s surroundings. In most browsers, strong text is rendered in bold. Again, people used to HTML4 and below will probably be familiar with the <b> tag for bold. For the same reason as with the italics tag, it’s usually preferable to use <strong>.

An example of usage is:


In this text, some words have to be <em>emphasised</em>, and rendered in italics.
Other text is more <strong>important</strong>, and so is rendered in bold.

Other interesting text-level semantics elements include the ‘strikeout’ <s> element, which strikes out the text contained in it, indicating that it is no longer relevant, and the ‘underline’ <u> element that tells says that the text should be underlined according to convention:


The text here is <s>wrong</s> right, and this text has been <u>mispelllt</u>,
so has been underlined according to convention.

There’s also a general purpose ‘span’ <span> element, which can be used when no other element conveys its meaning effectively. This is often used for styling, which we’ll look at later.


The text here is <span>inside a span</span>, and yet not inside a span over here.

Grouping content

Some tags allow you to group content together: paragraph <p> elements allow you to group a bunch of words into a paragraph, a collection of itmes can be grouped together using list elements containing list items, and division <div> elements can contain elements as a general purpose way to group them.

The paragraph element:
<p>This text has all been grouped into a paragraph. This is because it's all related, and would appear together in a document.<p>
Making lists

An unordered list <ul> is a list where the order of items is not relevant. List items are contained within <li> tags:

<ul>
    <li>This is one item</li>
    <li>This is another item</li>
    <li>And yet another</li>
</ul>

An ordered is is just that; the elements are numbered because their order is important:

<ol>
    <li>This is the first item</li>
    <li>This is the second item</li>
    <li>And this is the third</li>
</ol>

List items can contain other lists to form subitems in a tree-like hierarchy of list items:

<ul>
    <li>This is one item</li>
    <li>This is another item</li>
    <li>And yet another
        <ul>
            <li>This is the first subitem</li>
            <li>This is the second subitem</li>
            <li>This is the third subitem</li>
        </ul>
    </li>
</ul>
The general division element

The division <div> element can be used as a way to group elements where no other container is appropriate. This is often used so you can apply styles to a group of elements at once (which we’ll discuss in the next tutorial).

<div>
    <p>This paragraph is in the same container as other elements, forming a group</p>
    <ul>
        <li>This list is part of this group</li>
        <li>Everything contained in the div is in this group</li>
    </ul>
    <p>THis allows us to easily apply styles to a whole group of elements</p>
</div>
<p>I am not part of that div</p>

Sections

There are also elements which allow you to divide your page into sections analogous to a text document. They include the ‘header’ <header> element, the ‘footer’ <footer> element, the ‘navigation’ <nav> element and the ‘article’ <article> element. The usages of these elements are rather straight-forward:

<header>This is a document. This bit appears on every page.</header>
<nav>
    <a href="index.html">Here is home</a><br>
    <a href="somewhereelse.html">Here is somewhere else</a><br>
    <a href="nowhere.html">Here is nowhere</a>
</nav>
<article>
    <h1>This is the title of this article</h1>
    <p>And here is its contents</p>
</article>

There’s also a ‘section’ <section> element which can be used to denote sections in the document. It isn’t designed to be a general purpose grouping element, however (that’s what <div> is for), so don’t use it unless you’d put the section in a table of contents.

I’ll discuss more HTML elements in Part 4.

Comments: none yet | Filed under: tutorials | Tagged: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *