alert-circle An exclamation point inside of a circle. alert-triangle An exclamation point inside of a triangle shape. arrow-down-left An arrow pointing down and to the left. arrow-down-right An arrow pointing down and to the right. arrow-down An arrow pointing down. arrow-left An arrow pointing left. arrow-right-thick A thick arrow pointing right arrow-right An arrow pointing right. arrow-up-left An arrow pointing up and to the left. arrow-up-right-thick A thick arrow pointing up and to the right arrow-up-right An arrow pointing up and to the right. arrow-up-thick A thick arrow pointing up arrow-up An arrow pointing up. award A award bell A bell. calendar A calendar icon. camera-off A camera that is deactivated. camera A camera. check-circle A checkmark in a circle. checkmark A checkmark. chevron-down A chevron arrow pointing down. chevron-up A chevron arrow pointing up. chevron A chevron arrow pointing down. chevron A chevron arrow pointing down. chrome Chrome browser logo. close-circle An x in a circle. close A x shape. door A car door. edge Edge browser logo. ellipses An ellipses shape. engine A car engine. envelope A closed envelope. explorer Internet explorer logo. eye-off An eye that is deactivated. eye An eye. facebook Facebook logo. file-text A piece of paper with lines on it. file A blank piece of paper. firefox Firefox browser logo icon-flame A flame. fwd A car drivetrain. gear A gear with multiple teeth. grid A 2x2 grid. heart An empty heart. height-width Arrows indicating height and width measurement. home A home icon. info THe letter i in a circle. instagram Instagram logo. link A chain link. linkedin Linkedin logo. map-marker A map marker pin. maximize Four corners containing a plus sign. menu Three lines signifying a menu. message-circle A speech bubble. minus A minus dash. mpg A car dashboard gauge. opera Opera browser logo. pause A pause symbol. pencil A pencil. phone A phone handset. pinteest-disc Pinterest logo in a disc. pinterest Pinterest logo. play A play button. plus A plus symbol. safari Safari browser logo. search A magnifying glass. seat A car seat. shield A shield sliders A group of control sliders. square A square with rounded corners star A star. tag A shopping tag. thumbs-down A hand with the thumb pointing down. thumbs-up A hand with the thumb pointing up. trash A trash can. trophy A trophy. truck A truck icon. twitter Twitter logo. user-circle An outline of a person in a circle. user An outline of a person. video A video camera. youtube Youtube logo. zoom-in A magnifying glass with a plus in the center
Spark logo Spark Design System
Accessibility

Semantic HTML

Use the correct HTML elements for our content

Back to the a11y checklist

Why it matters

HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat it. They help our content be more meaningful to assistive technology users and have built-in keyboard accessibility. The more semantical detail we provide to SEO bots the better search engines are able to understand and index our content. Search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc.

WCAG 2.0 reference: 1.3.1 Info and Relationships

How to check for this

  1. Turn off the CSS to see how understandable the page is without it and test the structural element flow. Manual

Resources