HTML from Scratch. 2:1 Basic Tags
TweetHTML tags usually come in pairs, which surround parts of the text on the page. There are a few exceptions which don’t need a closing tag.
The <i> tag is another version of the <em> tag.
In this lesson we covered the essential tags which you need to know to “mark up” (put HTML tags into) your web page. Most of these reflect the meaning of parts of your page, which makes it easier for machines to understand what your page is about. This can also help people use your website who are using assistive devices: blind people, those with limited mobility and others. Some people say that if your page is properly constructed (written) with semantic markup then you don’t need to do anything more to enable everyone to read and enjoy your website.
ALL of these tags should only be used between the <body> and </body> tags.
Vocabulary:
semantic is another word for meaning.
Examples: titles, paragraphs, lists, links
presentational is the opposite of semantic in this context.
Examples: colours, fonts, sizes
markup or marking up means putting HTML tags into your web page.
Although most of the tags we learned in this lesson are semantic tags, many of them alter the presentation of the text in your browser. This is something which you can alter later. If all you used on your page was semantic HTML, the page would still be nicely set out and easy to read. This is known as the default browser behaviour.
We also learned that HTML tags which come in pairs of opening and closing tags should be correctly nested. Nesting means making sure that the tags are opened and closed in the same order, with the inside tags closing first. Here’s a simple way to remember:
first in, last out
If you imagine eggs inside a nest, it can help you visualise why this is called “nesting”.
If you make a mistake in your nesting, usually everything will look just fine until you start to do more complicated things. It also makes it harder to make the page look the same in different browsers if there are mistakes in the nesting order.
Most tags that come in pairs can be nested inside one another almost without limit. For now, just experiment and have fun. See how the look of items changes when different tags are used, and find out what happens when you combine them. Remember to check different browsers too! There will be some subtle differences.
On the next page you will find the tags which we covered in Lesson two, and their meanings. Practice using them until you feel comfortable.
Tags: assistive devices, default browser, eggs, exceptions, html tags, lt, mistake, pairs, paragraphs, semantic markup, semantic tags, visualise, vocabulary, web page
This entry was posted on Friday, August 5th, 2011 at 1:27 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply