HTML Tags in Design
There are really several aspects to using HTML tags. These are logical, structure, formatting and input.
Logical Tags:
The logical tags include the H1, H2, H3, H4, P, BLOCKQUOTE, EM, STRONG AND CITE tags. There are more, but these are the main tags anyone would use.
The logical tags follow the formal rules of writing college papers or essays, setting the written material out in a logical structure.
H1 is the title of the piece. H2 subdivides the piece into broad ideas. H3 divides the H2 ideas further, and H4 subdivides the H3 ideas.
Within the H tags are the P tags which set out the paragraphs. The first sentence of the entire piece is supposed to outline the broad scope or premise of the piece. The last paragraph summarizes the piece or states the conclusion.
Within each paragraph, the first sentence sets out the idea contained in the paragraph. The last sentence concludes that paragraph.
EM stands for emphasis. It shows the reader that the writer is emphasizing a point. STRONG shows that this is a more important point. BLOCKQUOTE is reserved for quoting from other writers.
The CITE tag is used at the end of the entire article to list the research and supporting documents for the piece. On the Internet the citations usually include links to the citations.
Using the logical tags properly makes it easier for text to speech readers to work on your site. It also makes it easier for people to read long articles because people think in terms of little sections and they scan (not read) to what they are interested in.
Plus, the search engines actually do recognize these tags and give a greater weight or importance to them. The most important tag is the H1 tag. It is supposed to match the website TITLE tag in the metatag section of your web page. If it does, you get a better search response on any words in your H1 tag.
Formatting Tags
Formatting tags simply change the appearance of the text or color on a page. These include the B (bold) tag, BR (Line break), I (italics) tags. There are more of these types of tags but most people don’t use them.
These tags do not tell search engines or directories anything about the content. They just change the appearance of the displayed information.
Most formatting is done these days with CSS, which has its own set of rules and tags to use. The logical tags are customized to alter their appearance with CSS. For example the default setting for the appearance of the H1 tag is a butt ugly HUGE font size with a massive amount of space between it and the text entry. With CSS you can set the H1 tag to a reasonable size with a reasonable amount of space after it.
Structure Tags
These include DIV, TABLE, TR, TD tags to name a few. The DIV tag can be used to position or style sections on the page. The TABLE, TR, TD tags are used to created rows and columns of information. Design purists take the position that these tags should only be used for tables of data. In fact, most designs on the Internet use tables to organize the layout of the page.
The alternative to using tables to layout the page is CSS, which uses the DIV tag to lay out the page. Since most people have great difficulty using CSS, this isn’t a favored method. Blogs use CSS layout so you will be sure to encounter this if you are using a blog and try to customize it’s appearance.
This probably explains why the search engines love blogs so much - they use CSS and they are heavily text oriented. Behind the scenes, the headers on your blogs are actually H tags. The blogs use the P tags by default - that’s why you always get a new paragraph, rather than a new line when you press enter.