Web-Optimization - Semantic HTML

Posted on |

Background

Semantic HTML is a feature in HTML. It exist back in HTML such as form, img, and tables. In HTML5, more semantic tags are added, for example header, footer, and nav. There are many benefits to for this. This added more structure to our html page. In the following, I’ll discuss the benefits of semantic HTML.

Benefits

  1. SEO
    Better structure allows search engines to identify which block is more important.

  2. Download Speed

  3. Maintainence.
    Better structure means better maintainence.

  4. Better for disability browsing

How to implement

HTML 5

  1. Replace divs with section, header, nav, footer or others.

  2. Use the above diagram to decide which html tag to use.