Corrosive Online

HTML Tags Explained

What is HTML?

HTML is an acronym for Hypertext Markup Language and it is the basis for every website. Even Flash based sites need some HTML to position elements on a page! So, to build a website, you will need a good grasp of the Tags and what they do. There are some Tags I won't cover but you will find all of the ones common in websites.

You would usually use an opening and closing Tag to tell the browser where it starts and finishes. This is not always the case but I will cover the exceptions to the rule later on. For example, the most widely used tag in web design is the div Tag. An opening div tag looks like this <div> and a closing div Tag looks like this </div>. For the purposes of this tutorial I won't even touch (x)HTML as I believe that this will muddy the waters.

I have also tried to break the Tags down into what I think are sensible 'categories'. These are not 'official' but I have done it this way to help you to better understand where they fit in to site structure.

'What Am I?' Tags

html, head, body

These tags are the ones you should start every web page with. The html Tag tells the browser that it is html it is reading. The head tag encloses all the elements of your page, such as links to javascript or stylesheets and meta data, which you do not want to be displayed on the page for human viewers. Think of them as being there for the benefit of Search Engines and browsers. The body tag contains the elements of your website that you do want to display on the page.

'Structure' or 'Layout' Tag

div

No! Not table tags, never...Tables are not for layout! The div Tag is all you need to create a website layout. Imagine that a div tag 'divides' up your page into the web design staples of banners, columns and footers. This is the Tag to use to create your online masterpiece.

'Text' Tags - Headings & Paragraphs

h1, h2, h3, h4, h5, h6, p

These tags basically tell a browser and, more importantly, Search Engines how the text information in your website is arranged in order of importance. h1 stands for 'heading 1', h2 is 'heading 2' and so on. The p Tag stands for 'paragraph'.

A common mistake by rookie designers is to manipulate these Tags in a way that displays well to a human but makes no sense at all to a Search Engine. For example you may want a few words of text within a paragraph to be in bold or italics. Don't be tempted to just use a heading Tag you have not used previously and style that. It may look fine but a Search Engine will take those few words to be a heading.

Also be aware that these tags have browser 'defaults' such as margin or padding. You may need to change these defaults using CSS to get your desired layout.

'Text' Tags - Other

strong, bold, em, abbr, blockquote, caption, address, cite, acronym

The only Tags which should need further explanation here are em which is short for emphasised text and abbr which is short for abbreviation, such as UK, USA or UN. Some of these tags has a default in the browser. For example, the strong tag will naturally make text bold and the blockquote tag will indent text from both sides unless you tell them differently with CSS styles. Have a look around the net for other text Tags as there are a few more I haven't covered here.

'Form' Tags

form, input, fieldset, textarea, select

We all love forms, taking website enquiries, answering surveys, taking customer orders...No? Just me then...I love forms. The form Tags help to construct your website forms. Most of these are fairly straightforward apart from the input Tag. This can have a number of different 'types' applied depending on what you want your input to be. For example; <input type="radio"> is a radio button and <input type="text"> is a single line text field. textarea is used if you require more than one line of text in a form.

'Image' Tag

img

Tells the browser it is displying an image and where to get that image from within your site structure.

'Link' Tag

a

Indicates a link to another page on your site or something external.

'Table' Tags

table, tr, th, td

Remember that tables are for tabular data. Think about a spreadsheet and you shouldn't go far wrong. The table Tag indicates a table begins, tr is a table row, th is a table header cell (usually with the titles for each column) and td is a table data cell.

'List' Tags

ol, ul, li

List Tags do exactly what they say on the tin. I.e. they create lists. I would usually recommend using lists for navigation on websites. In other words your navigation is a list of links to other pages on your website. The Tags themselves are ol, which indicates an 'ordered list'. This list will automatically put your links in an order and number them for you. A ul Tag in an 'unordered list' and will give you bullet points as a default. The li Tag is a 'list item' and will wrap each individual item the list.

I know that I have not covered every kind of HTML Tag that you can use in a website but I would consider these to be the most widely used. This should arm you with enough Tags to begin building your website layout.

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details. If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.