As I mentioned in my earlier post, HTML is the latest specification for HTML and in HTML5 there are a lot of new attributes and tags which can be used for SEO. In this article, I will keep discussing how to code in a search engine friendly way in HTML5.
1. Use new HTML5 elements instead of generic <div id=””> in defining overall structure:
1) <header> is a group of introductory/navigation which is different from <head>. <header> may be used directly under the body, or inside an individual article/section.
2) <footer>may contain author information, related documents, copyright data, etc. Footer may be used directly under the body, or inside an individual article/section.
3) <nav>can contain a group of links that point to other pages.
4) <section>represent one paragraph/block of content.
5) <aside>is a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. It can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
2. Use the tag appropriately.
1) Nesting the tags appropriately.
Elements like div、ul、ol、dl、p cannot be nested in elements like a、span、strong、em、p、h1~h6.
2) Caution on using too many div, span and table. Below are some standard uses of different html tags.
<p> is used for text content/paragraphs.
<dl> is used for defined list, e.g. list of headings, list of summaries.
<ul> is for undefined list.
<ol> is for ordered list.
<h1>~<h6> is for content headings. There is only one H1 allowed on each page.
<strong>/<em> is for important and emphasized text.
<img> is for images. ALT tag is mandatory. Background and buttons should be handled by css not <img>.
Any clock element that does not fit into the HTML5 tags can go into a div, but it has to have id property and label to clarify its purpose of use.
3. Use appropriate form structure.
1) Use fieldset to group the same fields.
2) Use legend to name the different categories.
3) Use CSS width to define the width of the textbox not the size property.
4) Use maxlength to control the length of input.
4. Set standards when naming the tags.
1) Use 3 letter abbreviations as the suffix of id name for different tags. For example:
Label: lbl
Text: txt
Password: txt
Textarea: txt
File: txt
Radio: rad
Checkbox: chk
Submit: btn
Reset: btn
Button: btn
Hidden: hid
2) Name the class meaningfully.
Use “-“to connect the words in the name.
3) Name
Keep it consistent to the id and use camel case, for example, id=”txt-id-card”, name=”idCard”.
These are just some basic standards that we should follow in our practice in order to make search engines understand your web pages easier.
