Introduction to HTML
HyperText Markup Langauge (HTML) is a text based langauge that describe how to structure content on a web page. HTML was created by Tim Berners-Lee, a computer scientist in the late 1980s and early 1990s.
Primary Objective of HTML was to create a way to easily share and access information over the internet.
In the modern world, HTML is primarily used to structure the content of web pages. HTML defines the semantic meaning of content on a web page, indicating what elements are headings, paragraphs, lists, tables, etc.
Tags in HTML
Tag is a keyword which tells the browser how to format the content and structure of the page. In HTML there are various types of tags are there, eg: h1, h2, h3, etc. Every tag has it’s own usecase and importance in a webpage
We classify tags into two categories
Non-semantic tags
Semantic tags
Non-semantic tags
Non-semantic tags do not provide any information about the type of content they contain. They are generic containers for content, making them flexible for web developers to use when there is no clear need for structure or meaning.
eg: <div>, <span>
Semantic tags
Semantic tags provide information about the type of content they contain. They carry meaning beyond just their visual presentation, clearly indicating the purpose of the content they enclose.
eg: <nav>, <header>, <footer>
Why do we need to use Semantic tags?
As we know Semantic tags are easier to read and understand for developers. But there are two more specfic reasons why we should use Semantic tags over Non-semantic tags.
Accessibility:
The proper use of Semantic tags, helps sighted users to understand content better as their screen readers will communicate content more accurately.SEO:
As Semantic tags itself provides the information about the content they hold, this gives search engine crawlers, like Googlebot, a better understanding of content your web page serves. This will increases the chances the content will be selected as a candidate for ranking on the search engine results page (SERP) for relevant keywords.
Types of Semantic Tags
HTML semantic tags for structure
HTML semantic tags for text
Semantic HTML Tips & Best Practices
Don’t use tags for the styling purpose:
Although web browsers apply styling to many semantic tags, eg: using a <a> for a non-link text just to make it blue and underline.
Nest Heading tags in Semantic manner:
Example: All the h3 heading follow a certain h2 heading should be subtopic of that h2 heading.
Reference:
Medium Article by “Chidubem Odunze (F)”
w3schools “HTML Semantic Elements”
Looking forward to your valuable feedback. Thank you for your cooperation!