Web & graphic design notes

Logical tags in HTML formatting

Today we would like to remind you about very useful tags which aren’t used very often nowadays. Coders and developers simply forget to use them, paying attention to other more important things in their projects. We think it happens often because developers deliver their websites without a production content and, usually, clients replace the dummy text with their own information by themselves using WYSIWYG editors without trying to grasp the document’s logical structure and semantics.

But once the project is done the SEO question pops up. Content writers and seo-experts use the semantically structured markup in order to get the best possible relevant search results online. One of the semantic markup techniques is usage of predefined HTML logical tags during text formatting.

We will skip the topic about using heading tags (h1, h2, h3, etc) and other formatting tags such as paragraphs, ordered/unordered lists, etc because we want to talk about something else. Many of the following tags we are going to discuss don’t modify the appearance of the text but determine the text meaning and therefore page semantics. Because all these elements are containers they require closing tags (<strong> container </strong>).

<strong>  tag

This element emphasizes the text between the tags, makes it more important than regular text. Usually browsers show the text surrounded by <strong> tags as bold-faced.

We want to <strong>emphasize</strong> this text.

<q> tag

This tag identifies a text as a short citation. Most of the browsers show the contents in <q> tags as italicized text. This element is very useful for academic or other research and technical publications where short citations are necessary (please note, for longer citations where break lines or several paragraphs are necessary you need to use <blockquote> tag). <q> tag has a cite attribute, so you can add a link to the citation source. Moreover, this tag is sensitive to languages. Use lang attribute for this.

<q lang=”en-us” cite=”http://www.brainyquote.com/quotes/topics/topic_technology.html”>Getting information off the Internet is like taking a drink from a fire hydrant.</q>

<cite> tag

This tag specifies the source to indicate the citation from different sources. Usually it’s rendered as italicized text.
Here is an example of how to use nested <q> and <cite> tags together:

<q>In one of his articles, Jacob Nielsen, stated that <q>Animation is used as a blunt weapon…</q></q>; <cite>PCWorld</cite>

<abbr> tag

This element means abbreviated text such as HTML. Moreover, this tag has a title option which gives an opportunity to make tooltip for users and, most importantly to SEO is that the description is crawled by the search engines.

<abbr title=”HyperText Markup Language”>HTML</abbr>

<acronym> tag

This tag defines the text as an acronym – well known contractions such as SQL (Structured Query Language), W3C (World Wide Web Consortium), etc. This element also has a title option to explain what this acronym means.

<acronym title=”Portland, OR, USA aka Portland International Airport code”>PDX</acronym>

<dfn> tag

This element indicates a definition of a term or a phrase. It is good practice to use this tag when the term appears for the very first time on the page with its definition.

<dfn>Web design</dfn> is a set of techniques to represent the content as an electronic documents or interactive multimedia by way of world wide web, internet browsers and web applications…

<code> tag

This tag defines a fragment of program code which may contain variables, functions, methods, etc. Browsers usually show these fragments as monospace fonts.

<code><?php echo ”Hello world!” ?></code>

<em> tag

This tag indicates the important part of the text.

<em>Warning!</em> Use a secure gate to make a payments.

<kbd> tag

This element indicates a text to be entered from keyboard with monospace fonts.

Please type the following: <kbd>update info</kbd>

<var> tag

This tag indicates variables in the text.

Use <var>x</var> to identify speed of the vehicle.

<samp> tag

This element identifies text as a sample. It is often used to state a result or something to that effect. Browsers render such fragments with italic fonts usually.

Program execution result: <samp>Complete successfully!</samp>

Notice that the above mentioned tags do not necessarily change the appearance of the text. They are not designed to change the appearance. Different browsers render these tags in their own manner. Using logical tags gives a well structured code and search-friendly semantic meaning for the search engine crawlers. Don’t forget to use them in your web projects :)