Singapore Web Design Blog

5 misunderstood HTML tags ever

HTML, or HyperText Markup Language, is a markup language used to create web pages as well as user interfaces for mobile and web applications along with CSS and JavaScript. It describes the general structure and appearance of a document, to accomplish that it uses many tags to add some content in the page such as <img /> that introduces it directly or <p> … </p> that surrounds the information and can include other tags as sub-elements. HTML can be very easy to learn, but sometimes it isn’t used to its full potential. Here are 5 of the most misunderstood HTML tags that can be unknown to some.

<cite>: It is useful for citing biblical references (or any other reference), just as <blockquote>, the text inside it will generally be rendered in italics by the browser but you still can change its appearance using CSS.

Here is an example of its use :

One of the most read dystopian books is <cite>Nineteen Eighty-Four</cite> by George Orwell.

It would look like this without CSS :

One of the most read dystopian books is Nineteen Eighty-Four by George Orwell.

<address>: This one defines a contact information, as its name says it will allow you to markup addresses in HTML. All you need to do is write the address inside the tags like so :

<address>

221B

Baker Street

London

</address>

As for <cite>, the format can be changed through CSS

<label>: This tag defines a label for an input element, it is one of the most forgotten tags, even if it actually is very useful and is great for styling and makes the element that you specify using “for” attributes clickable. Note that the “for” attribute should be equal to the “id” attribute of your element.

Here is an example of usage :

<label for=”yes”>Yes</label>

<input type=”radio” name=”answer” id=”yes” value=”yes”><br>

<label for=”no”>No</label>

<input type=”radio” name=”answer” id=”no” value=”no”><br>

So here instead of clicking on the radio field, you can click on the text and it will toggle the control.

<fieldset>: <fieldset> will allow you to group related elements inside a box, it will draw a line around them. If you add a <label> tag to it, it will give a title to your box.

As simple as the previous tags, here’s how it can be used :

<fieldset>

First-Name: <input type=”text”><br>

Last-Name: <input type=”text”><br>

Date of birth: <input type=”text”>

</fieldset>

<optgroup>: This one will allow you to define a group of related options in a drop-down list, you can visually choose from the select box easily since it will be sorted as groups.

It can be used for a genre of books, for example.

<select id = “books” name = “books”>

<optgroup label=”Kids”>

<option value=”totoro”>Totoro</option>

<option value=”caillou”>Caillou</option>

</optgroup>

<optgroup label=”Fantasy”>

<option value=”hp”>Harry Potter</option>

<option value=”lotr”>Lord of the Rings</option>

</optgroup>

</select>

Many other tags are still forgotten to the programming world, we should try to bring them back to life for most of them are more useful than we think.

I hope that this article will be useful for those who just started learning HTML, as for experts I suppose that most of you know how to use these tags.