HTML5: 12 Frequents Forget to Correct in Order to Optimize Your Code
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> and </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.
4. Quotes
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
<blockquote>tags. - For a short quotation, use
<q>tags. - For a very short quotation within a paragraph or a sentence, use
<cite>tags.
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.
The tag <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:adress@instantshift.com">Contact Us</a> Tel: +15686598561 </address>
6. Acronyms and Definitions
The tag <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 <caption>.
<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 <dfn>.
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 <dl>, <dt> and <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 - And
<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: <figure> and <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
<figcaption>to element<figure>.
<figure> <img src="logo.jpg" alt="instantShift magazine, Web Designers and Developers Daily Resource" width="300" height="250" /> <figcaption>Here logo instantShift</figcaption> </figure>
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>. <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 <strong>.
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.
12. If the Browser Does not Support javaScript
The tag <noscript> provided alternate content for users who have disabled javascript in their browser. <noscript> Element can contain all the elements you can find inside the body element of a normal HTML5 page.The content of the element <noscript> will only be displayed if javascript is not supported or disabled in the user’s browser. It is also a good habit to get into.
<script>
document.write ("Hello World!")
</script>
<noscript>Your browser does not support javaScript</noscript>
Wow so useful post for optimize code. Your post is very much essential for me. Please keep sharing with us !!
I found this article quite inaccurate in some points:
1. The http-equiv-Attribute is only neccessary when your ressource isn’t served through a http-server, e.g. when you open a html-file from local filesystem.
The correct mime-type should always be given in the http-response-headers.
For character-encoding html5 specifies the charset-attribute for meta-elements.
http://www.w3.org/TR/html51/document-metadata.html#attr-meta-charset
http://www.w3.org/TR/html51/infrastructure.html#extracting-character-encodings-from-meta-elements
4. the difference for blockquote-, q- and cite-Elements aren’t in the length of the quote.
blockquote is used, where floating-content is expected.
http://www.w3.org/TR/html51/grouping-content.html#the-blockquote-element
q should be used for text-level semantics, say: phrasing-content.
http://www.w3.org/TR/html51/text-level-semantics.html#the-q-element
the cite-element should’nt contain a quote itself anyway, but rather attribute the title of a quoted work.
http://www.w3.org/TR/html51/text-level-semantics.html#the-cite-element
10. This section needs some technical review: the elements b,i,strong,em etc. have a semantic role indeed and aren’t used for visual purposes only. the b-element is neither obsolete nor deprecated.
http://www.w3.org/TR/html51/text-level-semantics.html#the-b-element
http://www.w3.org/TR/html51/text-level-semantics.html#the-strong-element
http://www.w3.org/TR/html51/text-level-semantics.html#the-em-element
The differences for b,strong and em mainly lay in the stress-level. In an ideal world, authors would always use these elements together with a class-attribute, that says more about the authors intention.
12. Remember that the noscript-Element is not part of HTML5 in its XHTML-Mode: XHTML5.
http://www.w3.org/TR/html51/scripting-1.html#the-noscript-element
In #9 the figure tag is not closed. It is not clear whether the figcaption element should be included inside or after the figure element.
Code updated. The figcaption element should be included inside the figure element. The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last child of the <figure> element.
According to p.5:
Automatic representation of such links can break down your page design. That’s why sometimes is better to disallow this feature. The same is applies to Skype.
BlackBerry browser and Safari for iOS (iPhone/iPod/iPad) automatically detect phone numbers and email addresses and convert them to links. If you don’t want this feature, you should use the some meta tags.
For Safari:
For BlackBerry:
What did you mean by this?
Defines preformatted text. It displays your text so gross.
Gross? I am puzzled. Otherwise, thank you for writing this article.