Semantic HTML or Semantic markup

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). It is not case sensitive.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

HTML Links

HTML links are defined with the <a> tag. The link’s destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided.

Now let’s start learning about Semantic HTML

Semantic HTML or Semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are, and browsers know how to display them.

Why Semantic HTML?

The benefit of writing semantic HTML stems from what should be the driving goal of any web page: the desire to communicate. By adding semantic tags to your document, you provide additional information about that document, which aids in communication.

  • Easy to understand: using elements with a clear meaning makes the website’s source code easier to read for other web developers (or for the future you).
  • Accessibility: semantic elements makes the web pages accessible for mobile devices, as well as for people with disabilities. This is because screen readers and browsers are better able to understand the code when it is written with semantic HTML.
  • It improves your website SEO: Search Engine Optimization (SEO) is a methodology of strategies, techniques, and tactics used to increase the number of visitors to a website. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.