Semantic HTML

Today, I wanted to list the semantic HTML tags as a reference for myself.

Writting semantic HTML is definitively a Web Development best practice. Writting semantic HTML means using meaningful HTML elements in order to better describe and organize the content of the page.

This practice has several major benefits:

1. Improve the Search Engine Optimization of your pages: By using meaningful HTML elements, web crawlers better understand your pages’ content and therefore, index it appropriately according to your site’s subject.
2. Accessibility: Your content will be accessed mainly via a web browser but chances are that it will also be accessed via other devices like mobile devices.
3. Maintenance of the pages: Using semantic markup makes the code easier to read for machines (crawlers) and humans. Web Developers will better understand a page using meaningful HTML elements (if they know those elements) and will avoid to use unnecessary, meaningless div elements making the page harder to style (CSS) or interact with JavaScript.

Document structure elements

html, head, body

Document Head Elements

link, meta, object, script, style and title

Document Body Elements

Block Elements (text): p, h1, h2, h3, h4, h5, h6
Block Elements (list): dl, dt, dd, ol, ul, li
Block Elements (other): address, blockquote, del, div, hr, ins, pre, noscript, script

Inline Elements
Note: Inline elements must be nested in a block element
a, abbr, acronym, dfn, em, strong, code, sample, span, br, cite, del, ins, q, sub

Form Elements: form, button, input, label, legend, fieldset, option, optgroup. textarea, select

Tables: table, thead, tbody, tfoot, tr, th, td, colgroup, col, caption

I think a web developer should know at least 90% of those tags, their meaning and how to use them.

Reference: http://en.wikipedia.org/wiki/HTML || http://en.wikipedia.org/wiki/HTML#Semantic_HTML

Advertisement