How many html mark up tags get used? 80/20 web design
Have you ever stopped to look at how many markup tags there are in the current version of (x)html and how many of those you actually use? There are loads and loads of tags (or elements) that could be used to give meaning to a particular documents contents. But just as in spoken language only a small fraction of the number of words available to that language are actually used, the same goes for markup.
The same handful of tags get more use than any other tag. Does that mean that you don’t need to know the other ones? No, I’m not suggesting that. But for the newbie web designer or even the the experienced one who needs to examine his or her tag reference, knowing those few off pat could make life a lot easier.
Many new designers, especially self-taught ones like myself begin with the WYSIWYG editors such as Dreamweaver, but soon realise that writing code by hand is much more flexible, gives greater control and is easier to debug. It makes the code much lighter, easier to validate and gives better semantic meaning. But it can seem daunting seeing that great list of tags and wondering how long it might take to learn them all. Well, here’s the good news, you don’t need to learn them all. But it’s very handy to learn a few.
Which are the most commonly used html tags?
Every (x)html document or file has a few essential tags without which it would not qualify as such. I’m talking about the html tag, the body tag, the head and title tags. Let’s not forget the DTD or Document Type Declaration. They are essential to every document. But apart from those empty files called index.xtn to stop directory browsing, most documents do have some content. What kind of content?
Let’s start with headings. h1 down to h6. Headings 1 to 3 are used a lot. But headings 3 to 6 not so much. Ok, so the code isn’t that different, but unless you have heavily nested documents with sub-headings of sub-headings, then h3 is probably as far as you’ll get. On this site, the title of the blog is h1 and then the title of the post is h2. Sub-headings within the post are h3. Do I need h4? Very rarely.
Paragraphs? Nearly every document will have paragraphs. Perhaps a picture gallery or a document with only tabular data will not have paragraphs. But the paragraph tag can be found in nearly every html document out there, so that’s definitely one to know.
But before I start to get too far into the detail, let’s have a look at how one might derive that shortlist. And then come back to the list itself.
HTML references
There are so many references, everyone will have their own favourite. W3C will probably be the most detailed and definitive reference. But that list can be sub-divided into categories, just to make a big list a bit more manageable. In the same way as spoken language can be broken into categories such as nouns, verbs, adjectives etc., html can be broken up into categories. In BBEdit, a very popular text editor for the Mac, the Markup menu gives one way to divide that whole list of html tags or elements into categories. Let me list these here, as there aren’t that many.
- Head Elements
- Block Elements
- Lists
- Tables
- Forms
- Inline
- Phrase Elements
- Font Style Elements
- Frames
Wow! Suddenly it all seems a bit more manageable. So learning a few tags from each of the above should do it, but which ones? Well we can pretty much cross off the last but one and perhaps even the last two on this list as they are hardly ever used. CSS handles style rather than markup so it’s not needed and not semantic.
If you are not too familiar with html tags, and I’m assuming that you aren’t, then all you need to do is to view the source code of any web page. Nearly all browsers allow you to do this. Have a look in the View menu. On Safari it’s View > View Source. On Firefox it’s View > Page Source. This will open up a new window or tab and show the html code that has been delivered to the browser by the server. Firefox and Camino both have nice source code styling, so better to use those browsers to view the source code. As you keep looking at the source code of various web pages, you’ll notice the same tags coming up again and again. And there are others that hardly ever come up.
So far I haven’t given a definitive list of the 20% of html tags that make up the 80% of html documents. But I’m going to do that right now. Remember, I’m not saying that you don’t need to know the others, but you can get away with not knowing them and simply be aware of them and look them up when you need them. OK, so here goes.
The list of must know html tags or elements
I’m going to go through that list of categories above and give lists of tags, must-know tags within those categories.
- Head Elements
- meta
- link
- style
- Block Elements
- paragraph
- headings
- division
- blockquote
- preformatted
- Lists
- unordered
- ordered
- definition
- Tables
- table
- table row
- table data
- table header
- thead
- tbody
- Forms
- form
- input
- label
- textarea
- select
- option
- Inline
- anchor
- image
- span
- break
- Phrase Elements
- acronym
- citation
- abbreviation
- code
- emphasis
I know what you’re thinking, “Will it be enough?”. My question to you then is this - “Do you know all the words in the English language?” I know the answer and yet you are fluent in English, especially if you are native speaker. You’ll need to look them up though as I haven’t given a list of the actual tag syntax here. W3C schools is a good place to start as well as html dog.
What about the attributes?
The thing that I haven’t mentioned at all are the (x)html attributes. Each element can be extended by its attribute or property. For example the style element has a “type” attribute and a “media” attribute. What about these? You do need to know these and how they work. There are browser defaults if no attribute is given. So it’s good to know what attributes are available to each element and the defaults.
But easy does it. One category at a time. I hope I’ve made the task much less daunting. 