To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Standard HTML elements

This article covers some of the simple, standard HTML elements.

In the next article, several more complex structures will be covered.

Text in HTML

HTML documents may contain pure text. This form of writting involves the use of text and breaks. As well as this, it is possible to style text as required using some very plain HTML.

In the older days, HTML was displayed as shown in the following code sample:

HTML4
<font color="blue">My first text</font>
					

In HTML of today, this is not permitted. In fact, the use of CSS is encouraged here. CSS will be covered later. For now, this is simply how text is declared in HTML in relation to the top level element (<html>).

HTML
<html>
	<head>
	</head>
	<body>
		My first text
	</body>
</html>
						
My first text

Breaks

Breaks are the same as line endings for HTML. They represent the standard \n character used in other languages such as C or Java. This means that the current line is ended on that character.

In HTML, a break is represented in the form of <br> and in XHTML <br/>.

The following sample shows how a piece of text can broken up using a break.

HTML
<html>
	<head>
	</head>
	<body>
		My first text <br>
		My second text <br>
		My third text
	</body>
</html>
					
My first text
My second text
My third text

Horizontal lines

A horizontal line can be used to break sections. By default HTML includes a way of doing this to make development easier. Similar to the way the break works, the horizontal line uses just two characters and is a self closing element.

HTML
<html>
	<head>
	</head>
	<body>
		My first text <hr>
		My second text <hr>
		My third text
	</body>
</html>
						
My first text
My second text
My third text

Paragraph

The paragraph structure is a very nice and neat way of displaying text in a more readable fashion. In almost all occasions, paragraphs are separated by a single line. The HTML paragraph structure does this automatically, just as Microsoft Word would do, thus making for an easier to develop website.

Paragraphs themselves can contain line breaks, which means that text within them can be broken line by line. This website used to implement the <br> element in almost all articles prior to the new design due to the web editor being used.

A paragraph of text is opened using the paragraph element that is formed using <p>. It is not a self closing tag, and therefore must be closed at the end of the text that is to be included in the paragraph using </p>. This is an absolute must for the sake of formatting.

HTML
<html>
	<head>
	</head>
	<body>
		<p>My first text </p>
		<p>My second text <br>
		My third text</p>
	</body>
</html>
						

My first text

My second text
My third text

Font styles

Font styles can be determined by HTML as well. In Microsoft Office for instance, text can be selected and then at the click of a button a style such as bold, italic or underline can be applied. HTML is not much different - instead of selecting the text, the appropriate tag is placed before the text and then the closing tag after. Here is a simple bold italic example:

HTML
<b><i>Hello world</i></b> this is no longer bold italic
					

The previous sample would look like:

Hello world this is no longer bold italic

The order of tags is very important. In the previous sample, the bold tag opened on the outside, so the bold tag must be closed after the italic tag is closed.

Tag Purpose Sample
<b> Defines bold text Sample
<em> Defines emphasized text Sample
<i> Defines a part of text in an alternate voice or mood Sample
<small> Defines smaller text Sample
<strong> Defines important text Sample
<sub> Defines subscripted text Sample
<sup> Defines superscripted text Sample
<ins> Defines inserted text Sample
<del> Defines deleted text Sample

It is important to note the difference between strong and bold and emphasized and italic for syntactical purposes.

Hyperlinks have become known by their colloquialism of 'link'. Whilst HTML etc define links using the word link, the full name for such an device is actually a hyperlink as defined by the original HTTP specification. For the sake of saving reading space, this article will refer to them by this colloquialism.

The difference between a hyperlink and a link is very informal and incomplete, but can be seen from the following point of view; a hyperlink takes a user somewhere, whereas a link is used to make a chain between the current file and another. For instance, a link in CSS will 'attach' or 'chain' another page to the current page.

A hyperlink is a part of a document on a web page that takes a user to another location. Files can be hyperlinked using the file:// and web directories can be accessed using http:// (amongst other prefixes).

HTML allows the creation of links that join a page to another, for instance in a menu. These links are contained in an anchor element which allows further customisations to the link. A link consists of a href attribute that points to the page.

HTML
<html>
	<head>
	</head>
	<body>
		<a href="http://www.jamiebalfour.scot/">This is a link</a>
	</body>
</html>
						

There are two kinds of linking methods avaliable, relative and absolute. Relative linking is used when the file is in a location that is on the same website or web server. In fact, a relative link always omits the http:// and www. parts of a URL to the file. An absolute link is a full link with all the www. part and so on in it.

Links do not need to have http://... in front of them. In fact there are many ways to reference a page. Below is a list of ways of referencing pages using a link:

Syntax Location of link Type
<a href="/index.html">My page</a> By placing just one preceeding slash in the link, this refers to the document root, the lowest level location on the server from where the page is placed. Relative
<a href="../index.html">My page</a> By placing the preceeding double dots ( .. ) in front of the slash this refers to the directory directly one up from the current location. Relative
<a href="../../index.html">My page</a> By placing a dots and then a slash and repeating this will refer to the directory two up from the current location. Relative
<a href="index.html">My page</a> By not placing anything in precedence of the link, this page is referring to a page called index.html in the current directory. This is particularly useful if the structure of a website is changed frequently. Relative
<a href="http://mysite.com/index.html">My page</a> By using the full URL, the link is referring to an a file using an absolute path, that is one that will be found, no matter what, in that directory. Absolute
<a href="#link1">Section 1</a> By using a hash ( # ) at the start of a link, it refers to an element with an id attribute that matches the link on the current page. Relative
<a href="http://mysite.com/index.html#link1">Section 1</a> By using a page URL and then finishing it with a hash ( # ) then a piece of text, it refers to an element with an id attribute that matches the link on the specified page. Absolute

The link can contain quite a few different elements, including the image element, text or anything that is required. However, HTML5 is more strict than any previous version of HTML in specifying what can be contained in the link.

Images

As part of building a website, images are very much an important visual metaphor. Using images improves the site appearance significantly, but is not without costs - using images slows the delivery of a website due to the fact that each image needs to downloaded. As bandwidth increases and costs go down for a good connection, this becomes less of a worry, but smartphone users still have monthly allowances to keep an eye on, so images should be compressed.

In HTML, images are represented using the img tag. The img tag in XHTML needs to be closed as a self closing tag. The following sample shows how an image is represented in HTML.

HTML
<html>
	<head>
	</head>
	<body>
		<img src="https://www.jamiebalfour.scot/images/Favicon.png" alt="My Favicon">
	</body>
</html>
						
My Favicon

The next part of this tutorial will cover divisions, tables, lists, inline frames and styling.

Provide feedback on this page
Comments are sent via email to me.