When we write HTML we give content structure. We define things like paragraphs, lists, tables and headings. Writing semantic code means choosing the most appropriate element to define the required structure. This helps interoperability.

It is the best way to work with assistive technology. Semantic HTML gives context to screen readers or keyboard navigation to  enable people to identify different type of content and navigate to them.

HTML semantics are therefore important in two ways: We get a consistent understanding of content structure and native behaviour, and we get a common understanding of the content’s meaning and purpose. The best thing of all, is that we get those things for free whenever we use HTML as intended.

We use the most semantic element

There is a common understanding of what each element represents and does. For example the <p> tag represents a paragraph of static text, an <a> element is interactive and will fetch a new resource when activated. This common understanding enables browsers and other user agents to provide default functionality and styling for many elements.

In stead of reaching for a div or span,  we first check if there’s a better element to do the job. What is the role of that element? How should a person be interacting with the element? Based on that we pick the most implicit element of the  HTML5 elements

 

We separate structure from style

We don’t pick HTML elements based on how they’re styled in your CSS but we add semantic classnames that are easily identifiable.
We use the following classnames in our accordion
– awesome-accordion
— awesome-accordion-item
— awesome-accordion-heading
—- awesome-accordion-btn
— awesome-accordion-panel

We use progressive enhancement for enhanced functionality

After we created the structure using semantic elements and classes we can enhance the behaviour without breaking the underlying experience

We test our work

We Test cross-browser, test cross-device, and test with assistive technology. Testing with assistive technology is not as expensive as it used to be, you can even use your smartphone for testing on iOS and Android. Your visitors will thank you!