20 July 2012

Part1: basics of html5 (part6)

Tags and their attributes

Well, it was all too easy. Obviously, it took those pesky computer get involved and complicate things. It is not enough to write "just" text in the editor, you also give instructions to the computer. In HTML, this is done using tags.


HTML pages are filled with what are called tags. These are invisible on the screen to your visitors, but they allow the computer to understand what to display.

The tags are easy to spot. They are surrounded by "chevrons", that is to say, <and> symbols, like this: <tag>

What do they serve? They indicate the nature of the text they enclose. They mean, for example: "This is the page title", "This is an image", "This is a paragraph of text", etc..

There are two types of tags: tags in pairs and orphan tags.

Tags in pairs

They open, contain text, and close later. Here's what they look like:

<title> This is a title </ title>

We distinguish an opening tag (<title>) and a closing tag (</ title>) indicating that the title ends. This means that the computer for anything that is not between these two tags ... is not a title.

This is not a title <title> This is a title </ title> This is not a title

Orphan tags

These are tags that are most often used to insert an item at a specific location (eg an image). It is not necessary to delimit the beginning and end of the image, it just means the computer to "Insert a picture here."

An orphan tag is written like this:

<image />

Note that the / end is not mandatory. One could write only <image>. Nevertheless, not to be confused with the first type of tag, webmasters recommend this add / (slash) at the end of orphan tags. You'll see me put an / tags to orphan and I recommend you do the same, it's a good practice.


Attributes are a few options tags. They are supplemented to provide additional information. The attribute is placed after the name of the tag and has the most value, like this:

<tag attribut="valeur">

What good is it? Take the tag <image /> we have just seen. Only, it is not used much. We could add an attribute that specifies the name of the image to display:

<image nom="photo.jpg/>

The computer then understand that it should display the image contained in the file picture.jpg.

In the case of a running tag "pairs", one does not put the attributes in the tag and not in the closing tag. For example, this code indicates that the quote is from Neil Armstrong and she dated July 21, 1969:

<Quote auteur="Neil Armstrongdate="21/07/1969">
This is one small step for man, one giant leap for mankind.
</ Quote>

All the tags that we have just seen are fictitious. The real tags have names in English (yes!), we will discover later in this course.


Post a Comment