Day 22 & 23 Learn why semantic HTML is important & example of missing semantic

why semantic HTML is important.

What is HTML

HTML stands for Hyper Text Markup Language.It is the standard markup language for creating Web pages.HTML describes the structure of a Web page. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.

HTML is not a programming language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents, similarly to Microsoft Word.

What is 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.

Examples of semantic HTML tags include:

Header tags <h1> through <h6>

<blockquote>

<code>

<em>

There are many more semantic HTML tags to use.The following HTML5 tags can be used in the place of <div> tags to break your page content into identified parts, each of which fulfills a specific role. 

 

Why is Semantic HTML important?

According to Bruce Lawson, the semantic use of HTML elements “enhances accessibility, searchability, internationalization, and interoperability.” In other words, writing semantic markup is mandatory if you want your website to be accessible to all visitors, to achieve a high search engine ranking, to be available to visitors from around the world, and to interface effectively with other web services.

Writing semantic markup is about creating web content that is both human and computer readable. For sighted users, when a page is well designed visually, it is easy to identify the various parts of a web page at a glance. Headers, menus, and the main content are all immediately visually apparent. 

For users who are blind or visually impaired and rely on screen readers to verbally describe what is on a page, proper use of HTML semantic elements will allow screen readers to more accurately communicate your content by making the visual audible.

 SEO (Search Engine Optimisation) positioning can be affected, positively or negatively depending on factors such as: the way in which the content is written, a ‘responsive’ design or that the site is accessible.

In the case of Google, they use an algorithm that analyzes the code of the website, and uses the markup and the labels used to better understand the purpose of the page.

In this way, if designers use a semantic mark it will facilitate the task to the positioning algorithm helping us to reach more users. And in turn, website will be more accessible.

I found some semantic tags are missing from following HTML structure such as Header & Navigation.