Semantic Markup - Learn HTML to build responsive website - 17

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 like b and i are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning to the markup.

Examples of semantic HTML tags include the header tags h1 through h6, blockquote, code and em. There are many more semantic HTML tags that can be used as you build a standards-compliant website.

Why You Should Care About Semantics?
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. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.

Semantic HTML tags provide information about the contents of those tags that goes beyond just how they look on a page. Text that is enclosed in the code tag is immediately recognized by the browser as some type of coding language. Instead of trying to render that code, the browser understands that you are using that text as an example of the code for the purposes of an article or online tutorial of some kind.

Using semantic tags gives you many more hooks for styling your content. Perhaps today you prefer to have your code samples display in the default browser style, but tomorrow, you want to call them out with a gray background color, and later you want to define the precise mono-spaced font family or font stack to use for your samples. You can easily do all of these things by using semantic markup and smartly applied CSS.
#HTMLTutorial #HTMLForBeginners #AtifNaseem