November 13, 2010 in PSD to HTML

What is ‘Semantic Markup’?

Dictionary meaning of word semantic is ‘the study of language meaning’. For HTML it is the meaning of tags we use in a document. An example is p tag for paragraphs which means text written in p tag is a paragraph.

Markup is the notation that is used to indicate how text should be displayed. Again for HTML it means the tags we use to add meaning in the document.

Semantic markup is, coding the HTML so that code represents the information contained in elements, and is contextual to the content.

Is my document semantic?

View your HTML documents without any external formatting applied. That means without CSS, no JavaScript enhancement, and, if you want, no images as well; instead just the raw content. Look at it, read it through. Does it make any sense? Do you understand which parts are more important than others, which texts are headings, which parts are connected to each other?

If the answer is yes, the document is probably marked up with nice understandable semantic HTML.

(You can use browser extensions like ‘Web Developer Toolbar’ for Firefox to turn on and off CSS, JavaScript and images in your webpage temporarily.)

What are the Benefits of semantic markup?

The benefits of using good semantic markup in a document are:

  • It will be accessible to people seeing the document in an environment where CSS cannot be applied.
  • It will be understandable and coherent to people having it read to them with the help of a screen reader.
  • It will help to get a better search engine ranking, since search engines can easier distinguish the importance level of the document’s different parts and what message is being conveyed.
  • It will be a lot easier for web developers to maintain the code, and to separate content (HTML) from presentation (CSS).
  • In most cases, there will be less code, which isn’t cluttered by formatting, meaning that the web page will be faster to load.

Example

Incorrect use:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit. Cras iaculis aliquet augue.</br>Quisque lacus velit, tempus at, faucibus eget, lacinia id, libero. Duis aliquam, eros a consequat imperdiet, sapien ante ullamcorper sapien, id venenatis lacus augue in lorem.</p>
Correct use:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit. Cras iaculis aliquet augue.</p>

<p>Quisque lacus velit, tempus at, faucibus eget, lacinia id, libero. Duis aliquam, eros a consequat imperdiet, sapien ante ullamcorper sapien, id venenatis lacus augue in lorem.</p>
Issue Explained:

Paragraphs of text should always be wrapped in the paragraph (<p>) tag. The ‘p’ tag. By default, starts on a new line, so this is the correct method of making paragraphs; do not use the <br /> element to do the same thing, as this is not semantic.

About the author

Alok Jain

Alok designs digital experiences to help businesses achieve their goals. He is passionate about designing the right User Experience for their customers. For over 15 years, he has worked with small startups to mature product teams. Whether it is designing a WordPress product, a frontend experience, WooCommerce, or React.js, he follows the best product development practices for design and code, for desktop or mobile.

Leave a Reply

Your email address will not be published. Required fields are marked *