Sematic HTML refers to the use of HTML elements that convey meaning
about the content, it is also the backbone of modern ,accessible,and SEO friendly web development example
WHY THIS MATTERS--
1.ACCESSIBILITY--- screen readers and assistive tools help rely on sematic elements to understand page structure
2.SEARCH ENGINE OPTIMIZATION(SEO)--search engines use sematic HTML to better understand content hierarchy,boosting rankings example
we are learning semantics html
Home About contact usi love semantics html
- i love nav
- i love footer
- home
- about
- article
<section>
<h2>i also love javascript</h2>
<ul style="color: red;">
<li>python</li>
<li>javascript</li>
<li>react</li>
<li>css</li>
<li>c++</li>
</ul>
</section>
<aside><img src="profile.png.jpeg" alt="profile imagess"></aside>
<p style="color: blue;">
today we are learning css
different types of
</p>
<p> =green i love programming </p>
</main>
<footer>
<p>powered by programming students</p>
</footer>
4.
4.USE WAI-ARIA Attributes when neccessry-- sematic html often eliminates the the need for aria ,ARIA roles enhance accessibility
SEMATIC HTML TAGS ::the sematic html tags
*help search engine engine crawling and indexing *--search engines rely on html tags to build content heirachy eg
</header>`
<main>
</main>
<footer>about us copyright
</footer>
```
`
-<header></header> -this shows or highlights page introduction
-<main></main>--this shows or highlights the page's primary content
2.**BETTER CRAWLING EFFICIENCY**-search engines have bots and they prioritise sections with tags eg <main> and <article> this helps bots eg googlebots spend less crawl budget figuring out layout
-<footer></footer>-this is the final contents
Top comments (0)