Facebook Twitter Gplus Pinterest LinkedIn Google Maps E-mail
Home Design Understanding the basic HTML building blocks

Understanding the basic HTML building blocks

Understanding the basic HTML Building blocks

Understanding the basic HTML Building blocks

This guide extends the guide ‘making basic textual edits’, which enables website owners to make basic changes to their website.

If you have followed the steps in the previous guide, you should have a copy of all of your website files, in a folder on your local computer. Typical files include:

  • HTML files – There will be one file for each page on your website, they contain the textual content, links and structual information about the page. You can recognise these by the file extensions [.htm, .html, or .php]
  • Image files – These will be stored in a folder called ‘img’ or ‘images’. Typical file extensions are [.jpg, .png or .gif].
  • Style Sheet files –  These files describe how the page should be styled (i.e. background colours, fonts etc). They have a [.css] file extension.
  • Javascript files – Not all sites will have these files. They dictate how certain events should be handled. In performing basic edits, you should not need to edit these files.

In this guide we are going to look specifically at the contents of your HTML files. Therefore, you should select the file you are interested in and open it up, using a text editor (we recommend notepad).

HTML files contain a collection of ‘tags’. A tag begins with the symbol ‘<’ and finishes with ‘>’, in general, any tag that is ‘opened’ must be closed at a later point, a closing tag is begins with a forward slash. In between these tags, is the content to which it is describing.

To illustrate this, every HTML file begins with an opening <html> tag, and finishes with a </html>.

Common tags to look out for in a document are:

Head Tags (<head></head>)

General page information is stored between these tags. For example, title, description, keywords. This is also where any style sheets or javascript files are linked to for the page.

Body Tags (<body></body>)

This is where the main content that will be displayed in the browser is located.

Nav Tags (<nav></nav>)

This is where the main navigation information is located. A standard navigation menu will be an unordered list of anchor links (see below).

Article (<article></article>)

This is where the textual content for the pages is located (i.e. headings and paragraphs).

Headings (<h1></h1>, <h2></h2> etc)

As the name describes, these tags are used to identify the headings for a page. You should use a H1 for the most important heading, H2 for lesser section heading, H3, H4, H5 in respective order as they are required.

Paragraph (<p></p>)

The paragraph tag comprises the bulk of the article. You should place these tags around each block of text to form paragraphs.

Unordered Lists (<ul><li>List Item One</li><li> List Item Two</li></ul>)

An unordered list generally denotes a bulleted list. Add additional <li></li> tags to add extra items to the list. These lists are often combined with anchor links (see below) to form the navigation menus (which are then stored within the NAV tags).

Anchor Links (<a href=’destination-page.htm’>MY LINK</a>)

Anchor links form the basis of the navigation for the whole of the website. By using a combination of these links throughout your sites webpages, you can allow the visitor to navigate between all the pages on your site. In the example above, you can replace ‘destination-page.htm’ with any other file to change where the user is taken. The ‘MY LINK’ text is what is shown to the user (i.e. what he clicks on).

Image Tags (<img src=”img/your-image.jpg” alt=”a text description” />)

Image tags are crucial to the visual appeal of your site. The image tag identifies which image to include using the source attribute (i.e. src=’img/your-image.jpg’). Notice the image is located in the ‘img’ folder. The alt attribute describes to non-visual browsers what the image is about (the image tag is also special because it is ‘self closing’ notice the trailing slash at the end of the tag).

Now you have a rough idea of what the tags mean, try adding some extra ones to a page!

Try the following:

Add a heading and paragraph.

1)      Locate the opening <article> tag within the page. Close to this, you should see the main <h1> header tag followed by several <p> paragraph tags.

2)      Try adding an additional <h2> header (remember to close with a </h2>) and an extra paragraph.

3)      Save the file and upload to the webserver.

4)      Refresh the page to see the change.

Add an extra link to the page navigation.

1)      Locate the opening <nav> tag. You should see an unordered list <ul>, with several <li></li> list elements, that each contain an anchor link <a href=’’>link</a>

2)      Try adding an extra link

3)      Save the file and upload to webserver.

4)      Refresh the page to see change.

Add an image.

1)      Upload ‘your-new-image.jpg’ to the ‘img’ folder on the webserver.

2)      Navigate to the <article> area of the HTML file.

3)      Add an image tag with the src=”img/your-new-image.jpg”.

4)      Save file and upload to web server.

5)      Refresh the page to see change.

Hopefully you are now a little more confident at making changes to your websites pages. Remember, if you make a mistake, copy the file you have been working on from the BACKUP folder and replace it over the one you have been working on.

This article has concentrated on changing the structure and content of your webpages. We strongly recommend that you read our article on ‘Understanding the basic elements of a CSS Style sheet’. Which will enable you to change how all the above information is displayed on the web browser (i.e. background colours, margins, fonts etc).

 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
1 Comment  comments 

One Response

  1. [...] strongly recommend that you read our article ‘Understanding the basic HTML building blocks’ for a clearer idea of the contents of the HTML file you just edited. In doing so, you should [...]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>