Semantic HTML or Semantic markup

2 min readDec 6, 2020

HTML stands for Hypertext Markup Language, is the primary markup language used to structure content on the web. Every single web page on the internet has at least some HTML markup included in its source code. HTML elements tell the browser how to display the content.

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.

For learning more about HTML, Click here.

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.

On the flip side of this equation, tags such as <b> and <i> are not semantic. They define only how the text should look (bold or italic), and don’t provide any additional meaning to the markup.

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.

Semantic element clearly describes its meaning to both the browser and the developer.

If you want to explore more. Click here.