Are You Making These 14 Common HTML5 Mistakes

HTML5, the latest standard for HTML and a candidate recommendation of the W3C, was definitely a blessing for web developers. It has not only allowed them to make their markup more search engine friendly, but also helped them get cut off on HTTP requests and create a better user experience.

Despite all HTML5 has to offer, most of the developers still don’t know how to implement it properly. From beginner to advanced coders, almost everyone commit mistakes in their HTML files, either due to carelessness or lack of experience. This post rounds up a collection of some common HTML mistakes and also describes how to correct them in order to validate your HTML.

Let’s start with the MIME type declaration.

#1. MIME Type Declaration:

MIME refers to “Multipurpose Internet Mail Extensions”. It was originally built for SMTP protocol but is now used beyond describing the content of email. Today web browsers also use the MIME type to know the media type of a file, and consequently what to do with it.

The MIME type helps web browsers determine how to display files that are not in HTML format. Whenever the browser encounters such type of files, it shows accents or symbols by making use of the declared MIME type. Therefore, declaring the mime type is quite crucial for getting rid of weird characters full in your page.

As a rule of thumb, the statement given below is mostly used, and placed in the head section i.e. between <head> and </head> to declare the MIME type.

<!- Statement by the MIME-type ->
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

In above example, the content=”text/html, is the MIME type of an HTML file. The browser will use its first part to identify the file format as a text, and then will use the second part to render it as an HTML file.

#2. The Title Attribute for Links:

The title attribute is intended to provide extra information to users about the page being linked to. When used properly, this attribute can add usability, accessibility, and many SEO advantages to your web pages. The title attribute plays a vital role in determining whether a link will be bad, good, or very good. To make a link “very good”, all you need to do is simply apply the following two rules:

Place as many correct keywords as possible related to the document to which it links.
Add a title- which links itself to the keywords related to the document – to it.

<!- Not so bad ->
To read our blog, click <a href=”http://www.xhtmljunction.com/blog”>here</a>.

<!- Much better ->
Visit <a href=”http://www.xhtmljunction.com” title=”The Junction Of Perfection”>Xhtmljunction<a>, a specialized PSD to HTML conversion company.

The title mentioned in the second code will be displayed in most browsers, whenever a user will hover over the link.

#3. Image Alt Attribute:

The Alt attribute is meant to provide an alternative information to those users who disabled the images in their browsers and those user agents that are not able to “see” the images.

Most of the people forget to associate the Alt attribute with the <img/> tag, which results in decreased accessibility of their websites. When used in the right way, the Alt attribute doesn’t only improve the ranking of your images in search engines, but also works as an essential utility to show alternative text (when the image is not loaded in browser) in order to make the greatest possible accessibility.

<img src=”http://www.xhtmljunction.com/common/images/logo.png” alt=”Xhtmljunction Logo” />

As the Alt attribute gives no explanation of your image, you must use the title attribute to display a tooltip or short information text in the browser.

<img src=”http://www.xhtmljunction.com/common/images/logo.png” alt=”Xhtmljunction Logo” title=”The Junction of Perfection” />

When a user will hover over the image, the text of the title attribute will be displayed.

#4. Quotes:

Whether you’re going to write non-fiction or fiction, chances are you’ll be required to write a quotation somewhere on your web pages. Unfortunately, no special treatment is given to quotations. They are usually part of a paragraph () or sentence, which are not being highlighted. But the surprising thing is that multiple tags are dedicated to them at the semantic level, as shown below:

The <blockquote> tag is used for indicating long quotations.
The <q> tag is used for to show short quotations.
The <cite> tag is used for a very short quotation within a sentence or a paragraph.

#5. The Email Addresses and Personal Details:

Mostly, coders incorporate Email addresses and personal details as such in their HTML5 document. The <address> tag is used to describe the contact information for the author/owner of a document/article, and can highlight contact details, email addresses, and URL. As a general rule, the text in the <address> element renders in italic. The representation may be different in different browsers.

<address>

A Guest Post by <a href=”mailto:[email protected]”>Xhtmljunction</a>.

 

Tel: (800) 704-0428

</address>

#6. Acronyms and Definitions:

The tag <acronym> or <abbr> (for HTML5) defines an acronym or abbreviation. By marking up acronyms/ abbreviations with the <abbr> element, you can provide valuable information to search-engine indexers, web browsers, translation systems, and spell checkers.

The <abbr title=”HyperText Markup Language”>HTML</abbr> was created in 1990.

#7. The Caption or Title for a Table:

Some of the people use heading tags (H1, H2…) that breaks the table to show information. That’s not a good practice. If you want to specify a title or caption for a table, it’s better to mix the title or caption inside the table, instead of putting it before or after the table.

To define a table caption or title, use the tag <caption>.

<table border=”2″>

<caption>Archive</caption>

<tr>

<th>Year</th>

<th>Month</th>

</tr>

<tr>

<td>2014</td>

<td>January</td>

</tr>

</table>

It’s mandatory to insert the tag <caption> immediately after the <table> tag. By default, the caption of a table is center-aligned, but you can align and place it as per your requirements, using the CSS properties text-align and caption-side.

#8. Definitions of Words or Phrases:

To display a phrase or word to define and, at the same time, highlight it as a definition term, there are two solutions.

If the same sentence contains a phrase or word with its definition, then use the <dfn> tag.

Use the <dfn>HTML5</dfn>, the latest version of language HTML, to optimize your website code.

But if you want to do this a more classical way: Word: Definition, then you should use <dl>, <dt> and <dd> tags.

The <dl> tag defines a description/definition list.
The <dt> tag defines a phrase/word to be defined in the definition list.
The <dd> tag indicates the description of a word in the definition list.

<dl>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

<dt>HTML</dt>

<dd>Hypertext Markup Language</dd>

</dl>

#9. Photo Captions:

To display the caption of an image, the tags <figure> (specifies self-contained content) and <figcaption>(defines a caption for a <figure> element)can be used in HTML5. Follow the procedure given below:

Include your image in <figure> tag to highlight it for search engines and web browsers.
Add a caption with the tag <figcaption> for <figure> element.

<figure>

<img src=”http://www.xhtmljunction.com/common/images/logo.png” alt=”Xhtmljunction, a specialized PSD to HTML conversion company” width=”260″ height=”50″ />

<figcaption>The Logo of Xhtmljunction</figcaption>

</figure>

#10. Highlighting a Word or Phrase:

There may be a number of reasons you can highlight a word, phrase or sentence. The simplest example is to make a word or group of words bold or italicize. So these words could get attention of your readers more easily. The key reason to highlight something is visual hierarchy.

To highlight one or more words, you can use several tags such as Bold or (in HTML5), Italic , Underline etc. But a new tag is introduced in HTML5: . The tag is used to highlight parts of a text. When you surround an element by these tags, the browser will display that element with a background color fluorescent yellow.

this is bold text

 text in italics

 underlined text

 the marked text

 <code>a piece of code</code>

 <kbd>keyboard input</kbd>

 <var>Variable</var>

As the tag has become obsolete or deprecated in HTML5, we strongly recommend using the tag instead.

A question that may come in your mind is: why to use these HTML5 tags, if HTML5 is a structuring language with content prioritization and CSS is there for layout and design?

There are two benefits of using these tags: the first one is highlighting the text for your readers. The other one is getting better ranking in search engines. These tags give you an opportunity to frame the keywords of your page and diversify your highlighted text for the same keywords.

Search engines robots, which crawl and index your site, don’t have an eye. Using these tags, you help them let know about one or more important keywords.

<!- Useless for SEO ->
PSD to HTML Conversion by XhtmlJunction.

<!- Great for SEO ->
PSD to HTML Conversion by XhtmlJunction.

#11. Plain Text:

The tag <pre> is used to define preformatted text. Text surrounded by these tags is displayed in a fixed-width font (such as Courier), and it preserves both line breaks and spaces of origin.

You can use <pre> tag to display some sort of computer code, or text with unusual formatting.

<pre>

Get the finest PSD to

HTML/CSS conversion service at

an affordable price of $ 59 for

the homepage and 50% discount

for the inner pages.

</pre>

#12. Missing <noscript>:

The tag <noscript> delivers an alternate content to readers, whose browser does not support JavaScript or who have disabled JavaScript in their browser. For a normal HTML page, all the elements inside the <body> element can be contained in the <noscript> element. The content inside the element <noscript> will only be displayed if JavaScript is disabled, or not supported in the user’s browser.

<script>

document.write (“Hi There!”)

</script>

<noscript>Enable JavaScript in your browser</noscript>

#13. Missing or Incorrect DOCTYPE:

The DOCTYPE, which refers to a Document Type Definition (DTD), tells the browser what version of HTML your web page is written in. The <DOCTYPE> declaration is case sensitive and must be the very first line of your HTML code. So the browser could know what type of document to expect.

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

Content..

</body>

</html>

#14. Improperly Nesting of HTML Tags:

This is a very common mistake, especially made by beginners, that may result in things not functioning properly. HTML tags must be opened and closed in the proper order. Once a tag has opened, it must be closed before anything above it can close.

Incorrect:
Xhtmljunction

Correct:
Xhtmljunction