BWD Chapter 12: More HTML!
2004-12-08 20:33 - Beginners Web Development
Chapter 12
More HTML!
Last chapter we gave some introduction to advanced topics in HTML, and the tags to use to make HTML. On we continue, with more detail for each topic. The first on the list is tags.
In the list in chapter 11 we covered many different tags. Some were explicitly marked as bad tags to use. The truth is, bad in some situations. A bold tag has no semantic meaning, where a strong tag does. Rarely you will need bold text, but without the meaning the strong tag provides. The short version is to say: Remember the semantic meaning of each tag, and be sure to use the tag which applies the most (correct) meaning. This is good for everyone, but especially those with disabilities. The blind, for example, will use a program to read the text of a page out loud. The screen reader can apply a different voice to "strong" amd "em"phasized text. It may also use headers (h1. h2, etc) as navigational aids. Using the tag which means what you are trying to accomplish, even if it does not look perfect, is the best way to go.
There are many HTML tags, some are old, and should no longer be used. Some have no meaning where another tag can accomplish the same thing, yet also imply important meaning. Others are "good" tags and others still are "bad" but, the only solution to a given problem. It is up to the designer (you!) to know what tool to use to solve each small problem in your path to the finished product.
The intelligent reader will see that we just covered the topic of accessibility in the preceding paragraphs, something that was mentioned earlier as a big important topic. Now it is time for separation of content and presentation, another big topic. There is an important feature of the tag which we have ignored until now, the attribute. Some tags always take attributes to work properly, some (almost) never. Attributes are, simply, another detail about a tag, how it works or what it does. Attributes are written out in the opening tag, of the pair. They look something like this:
Click on this link to visit <a href="http://www.google.com/">Google</a>.
This is a simple sentence, whose last word will show up as a hyperlink. The <a> tag lets us specify a hyperlink. The href attribute lets us specify the "hyperlink reference" for this link. That is the document to be loaded when the link is activated. In our example above, the hyperlink references Google. All attributes have a particular format or set of values allowed. In the case of the href attribute to the a tag, that format is of the URL.
URL stands for Uniform Resource Locator. There are a number of special URLs that break the usual pattern that we will quickly list first. The URL "about:" will link to a page displaying details about the browser. Much more useful is "about:blank" which will display a blank page. There are others, but they are generally browser dependent and not nearly as useful.
A normal URL comes in this format:
So once you have your tags down, you must learn all the applicable attributes. Each attribute can easily be as complicated as the href we just discussed, or can be very simple. Like any craftsman, though, it is important to know what tools you have available and to always select the best tool for the job. Make sure, at the least, that you have a good reference to refer to. Then, read or at least skim it. You need to know at least what things are in the document and some general ideas about each one. Then, you will know which tool to use. When you need it, you can always look up the specifics of how it works.
There are many many attributes, and I need not get into all the details here. There are many good references available elsewhere online. They range from basic to advanced, and I suggest you always use the most advanced that you can handle. You will learn what the pieces you do not understand, as long as you keep seeing them in your reference!
For that reason, I will suggest the official standards document from W3C (World Wide Web Consortium). The W3C is the international group which ratifies standards for things effecting the web. HTML is of course a big one of them. To get straight info, read the W3C's specification. You might even want to read some other things first like How To Read W3C Specs.
It is best to refer to (and bookmark) the table of contents. Obviously, anything can be found from there, and it is organized well. It is often notated with details when a particular tag is outdated. It comes with precise definitions of the possibilities for each tag, and it often comes with examples of the right (and sometimes wrong!) things to do. The sticking point for beginners is the complexity. These documents are truly comprehensive, and written with the expert in mind.
Find another reference if you prefer. The rest of this tutorial will refer to the W3C standard, though, often with links. Make sure to always keep in mind our important principles as well, and be sure to consider which tags are appropriate, which are not, and which should always be avoided.
For our last comment on attributes, remember one important thing. Certain attributes apply to only a particular tag. Others, though, are universal for all tags. These attributes are often very important. Some big examples are id and class. You can assign an id and a class to any tag at all. In fact, you should. It is these tags which facilitate properly styling the appearance of your page. Be sure to apply an id or class where necessary, but also do not go overboard. Too many, especially too many different types, can make things very difficult to understand. An id must also be unique. Only one tag may be given one id value. On the other hand, one class can apply to as many tags as you want. This is important to remember.
