Testing challenge

 Day 22 # Why Semantic HTML is important?

Because semantic HTML uses elements for their given purpose, it’s easier for both people and machines to read and understand it.


Semantic elements = elements with meaning.
A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form><table>, and <article> - Clearly defines its content.


Semantic markup is a way of writing and structuring your HTML (Hypertext Markup Language) so that it reinforces the semantics, or meaning, of the content rather than its appearance. In a broader sense, it means that your site architecture separates presentation from content; essentially saying that HTML is used for structure, and CSS is used for the style of your web design.

Semantics and accessibility are a part of HTML by design, but they are not useful unless they are implemented correctly. Writing semantic markup means understanding the hierarchy of your content and how both users and machines will read it. Much of it can seem like common-sense; when you write a heading, mark it with a heading tag (<h1>, <h2>, etc.). When you write a paragraph, mark it with a paragraph tag (<p>). Semantic markup means that HTML tags are never chosen based on the way they appear in a web browser — they’re chosen based on the importance and structure of the content.

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:  

  • <article>                                  
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
The goal is to make it easier for browsers, developers, and crawlers to distinguish between different types of data. All of these semantic tags make it clearer what information is on the webpage as well as its importance.



 



Comments

Popular posts from this blog

Testing challenge

Testing challenges

Accessibility testing challenges