Here is a list of 12 common forget to correct in order to optimize your HTML5 source code. It may be the details, but placed end to end, they make the difference. By improving the semantic, web SEO will benefit. Select the most appropriate tag is essential.
A while back we had compiled a list of 20 Tricks for properly coding HTML5 pages now let’s have a look at all the common HTML5 forget starting with the MIME type.
1. Declare the MIME type
Declare the mime type will be very useful if you do not want to get stuck with weird characters full in your page instead of accents or symbols. As a general rule, the most used statement is as follows, it takes place between
</head> HTML5 document:
<!- Statement by the mime-type -> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2. The Title Attribute for Links
There are links, good links and very good links. Make a very good are not so simple, yet it is sufficient simply to apply the following two rules:
- Try to place a maximum – to the possible extent and correct – keywords related to the document to which it points.
- Add it a title – which will appear at mouseover – by placing it, as the link itself, keywords related to the document to which it points.
<!- Not terrible -> To read our Magazine, click <a href="http://www.instantshift.com">here</a>. <!- Much better -> Visit <a href="http://www.instantshift.com" title="Consult the instantShift magazine, web development">instantShift<a>, a Magazine dedicated to the designers, and developers.
3. Alt Attribute for Images
The alt attribute is often forgotten to be associated with the
<img /> tag. In addition to the essential utility to display alternative text if the image can not be loaded, it improves the ranking of images in Google. Do not forget more and made two shots in one: Make the greatest possible accessibility while improving indexing.
<img src="http://www.instantshift.com/images/logo.png" alt="instantShift Logo" />
Be careful not to confuse, the alt attribute gives no explanation of your photo when all goes well. To display a short information text – or tooltip – you must use the title attribute. As a link… And when hovering over the image, the text of the title attribute will appear:
<img src="http://www.instantshift.com/images/logo.png" alt="instantShift Logo" title="instantShift, magazine for web design and development" />
Unlike the alt attribute, the title attribute is not mandatory for the images.
Often, quotations are not subject to any special treatment. It is often part of a paragraph (
<p>) without being highlighted. And it’s a pity, because at the semantic level, multiple tags are dedicated to them:
- For a long quotation, use
- For a short quotation, use
- For a very short quotation within a paragraph or a sentence, use
5. The Email Addresses and Personal Details
Most of the time, eMails addresses and personal details are incorporated as such in your HTML5 document.
<address> tag defines the contact information for the author or owner of a document.
<address> can highlight addresses, contact details and URL. They are usually displayed in a specific paragraph and italics (modified layout in CSS). The representation may vary depending on the browser.
<address> <a href="mailto:firstname.lastname@example.org">Contact Us</a> Tel: +15686598561 </address>
6. Acronyms and Definitions
<abbr> defines an abbreviation or acronym. Marking abbreviations with the
<abbr> element, they can provide useful information for browsers and search engine.
the <abbr title="without win">PSG</abbr> still... lost!
7. The Title or Caption of a Table
Some use heading tags (h1, h2…) that separates the table to display informations. This is a bad technique! If you want to add a title or caption to your table, no need to put it before or after. Mix the title or caption inside the corresponding table.
For a general title or caption of a table, use the tag
<table border="1"> <!- Legend General -> <caption>Our Review</caption> <tr> <th>year</th> <th>Month</th> </tr> <tr> <td>2013</td> <td>January</td> </tr> </table>
8. Definitions and Words or Phrases to Define
To display a word or phrase to define, depending on your case, you have two solutions to help you optimize your code.And, at the same time, highlight (for search engines) Keyword or phrase to define.
If the word or phrase and its definition are contained in the same sentence, you should use the tags
Use the <dfn>HTML5</dfn>, structuring language web page, to optimize your site.
However, if you are looking for a more classic model: Define a word: Definition, you should use tags
<dd>. This will form your definition list. Nothing prevents you to put only one term in a list!
<dl>Tag defines a definition list
- The tag
<dt>defines a word or phrase to be defined in a definition list
<dd>tag indicates the definition of a word to be defined within a definition list
<dl> <dt>HTML5</dt> <dd>Structuring Language</dd> <dt>CSS</dt> <dd>language layout design</dd> </dl>
9. The Legend Photos
To display the caption of a photo, we will use two new elements in HTML5:
<figcaption>. Use the following procedure:
- Start by including your photo in an
<figure>to highlight (for browsers and search engines).
- Add a legend with the tag
<figure> <img src="logo.jpg" alt="instantShift magazine, Web Designers and Developers Daily Resource" width="300" height="250" /> <figcaption>Here logo instantShift</figcaption>
10. Highlighting, or Demonstration of a Word or Phrase
There are various reasons to put a word, a phrase or even a sentence highlighted. The simplest example is the bolding of one or more words. Thus, with the contrast generated these words jump more easily in the eyes of your readers.
The main reason for highlighting is visual order.
To highlight a word or group of words, you have several tags: Bold, Italic… A new beacon appeared in HTML5:
<mark> Tag corresponds to a blow highlighter on a sheet of paper. It has the same effect in your programming and generally, browsers will display the element surrounded by these tags with a background color fluorescent yellow.
<strong>text in bold</strong> <em>text in italics or emphasis</em> <mark>past the marker text</mark> <dfn>term to define</dfn> <code>code Portion</code> <kbd>key keyboard</kbd> <var>Variable</var>
Warning: Some tags have become obsolete or deprecated in HTML5. For example, the tag
<b> is not used anymore, it is strongly recommended to use the tag
Yet, you were always told that HTML5 was a structuring language, prioritization of content and that there is CSS for layout and design. It is quite true, why these HTML5 tags?
The use of these tags will give you two benefits: Highlighting for your readers, but also a better ranking. Take the opportunity to frame the keywords of your page with these tags. And diversify your highlighted: for the same keyword, put some bold, italics sometimes…
Google’s robots which will index your site does not have an eye. The use of these tags will tell them that it is one or more importants key words.
<!- Useless for SEO -> <p>the <span class="gras">HTML5</span> is a great language!</p> <!- Best for SEO -> <p><strong>HTML5</strong> is a great language!</p>
11. Plain Text
<pre> Defines preformatted text. It displays your text so gross.
The text in a
<pre> is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks of origin.
<noscript> Element can contain all the elements you can find inside the body element of a normal HTML5 page.The content of the element