The latest articles on DEV Community by Sunday Onyango (@onyango001). https://dev.to/onyango001 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3460824%2Fb1f0c834-cca9-4db9-9d3d-8bd230a535bc.jpeg https://dev.to/onyango001 en Sunday Onyango Tue, 09 Sep 2025 17:02:51 +0000 https://dev.to/onyango001/-13ga https://dev.to/onyango001/-13ga <div class="ltag__link"> <a href="/onyango001" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3460824%2Fb1f0c834-cca9-4db9-9d3d-8bd230a535bc.jpeg" alt="onyango001"> </div> </a> <a href="https://dev.to/onyango001/implimenting-sementichtml-3ohd" class="ltag__link__link"> <div class="ltag__link__content"> <h2>IMPLIMENTING SEMENTIC.HTML</h2> <h3>Sunday Onyango ・ Aug 27</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#webdev</span> <span class="ltag__link__tag">#seo</span> <span class="ltag__link__tag">#semantichtml</span> </div> </div> </a> </div> webdev seo semantichtml Sunday Onyango Wed, 27 Aug 2025 17:13:46 +0000 https://dev.to/onyango001/implimenting-sementichtml-3ohd https://dev.to/onyango001/implimenting-sementichtml-3ohd <p><strong>INTRODUCTION</strong><br> This involves using HTML elements according to their meaning /purpose neither than solely for their default visual appearence,which provides structures &amp;meaning on your content improving <strong>SEO</strong> and maintability.<br> The following are key aspects of implementing Semantic.HTML.<br> <strong>BODY</strong></p> <h2> USE APPROPRIATE SEMANTIC ELEMENT </h2> <p>This makes the browser to interprate what you are trying to do,the elements are as followed.<br> STRUCTURAL ELEMENT<br> <code>header<br> nav<br> main<br> article<br> section<br> aside<br> footer</code></p> <p>b)<u>Content element<br> <code>h1-h2-for heading<br> </code>p<code>-for paragraph<br> </code>ul,ol,li<code>-for listig<br> </code>strong<code>-for strong importance<br> </code>em<code>-for emphasis<br> </code>figure,figcaption`-for figures,captions,etc</u></p> <p>C)<u>Form elements</u><br> <code>label,inpute,textara,select,option</code>-to create accessible forms.</p> <h2> STRUCTURE CONTENT LOGICALLY </h2> <p>-Organize your content accordingly using heading(<code>h1</code>to<code>h6</code>)to reflect the document outline.<br> -Group related content within <code>section </code>or <code>article</code> elements,and also place main content within<code> main</code> elements.</p> <h2> PROVIDE TEXT ALTERNATIVES FOR NON-TEXT CONTENT </h2> <p>-Use the ALT attribute for <code>img</code> elements to describe the image content for screen readers.Also include captions for images and figures using <code>figcaption</code>.<br> -Provide transcipts or description for audio and video content.</p> <h2> CONSIDER ACCESSIBILITY </h2> <p>-Semantic.HTML improves accessibility for effective technologies like screen readers.Use ARIA roles and attributes when necessary to provide additional semantic meaning/interactivity that isn't fully conveyed by HTML elements,but use nativebsemantic HTML elements first.</p> <h2> REGULATE/AVOID OVERUSING NON=SEMANTIC ELEMENTS </h2> <p>-Use CSS for visual presentation and layout,keeping you HTML focused on content structure &amp; MEANING.<br> <strong>CONCLUSION</strong><br> -According to the assumptions from the content above i conclude that implementing semantic.HTML can improve accessibility,SEO and maintanability.<br> -Also you can find out on the web development at <a href="https://www.youtube.com/watch?v=8sXRyHI3bLw" rel="noopener noreferrer">https://www.youtube.com/watch?v=8sXRyHI3bLw</a><br> <a href="https://github.com/onyango001/onyango001.git" rel="noopener noreferrer">https://github.com/onyango001/onyango001.git</a></p> webdev seo semantichtml