DEV Community

lewis muthogo
lewis muthogo

Posted on

Sematic HTML for SEO and accessibilty

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

welcome welcome

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

-this shows the primary topic -this shows standard content blocks 3.MAINTAINABILITY AND SCALABILITY--sematic elements make the code cleaner and easier to read and maintain HOW TO EFFECTIVELY IMPLEMENT SEMANTIC HTML ---- 1.choose the Right structural elements 2.use proper headings hierarchically Semantic h1{color: blueviolet;} we are learning semantics html HOW TO EFFECTIVELY IMPLEMENT SEMANTIC HTML ---- 1.choose the Right structural elements 2.use properheadings hierarchically Semantic h1{color: blueviolet;}

we are learning semantics html

Home About contact us

i love semantics html

  1. i love nav
  2. i love footer
  3. home
  4. about
  5. 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)