Skip to: Semantic structure

Awesome Accordions website

Semantic structure

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!

Ready to build better team pages?

Get it for $29.00

What's so awesome about us?

  • Open source

    Our plugins are 100% open source and developed transparently on Bitbucket. Anyone can join the development and contribute.

  • Works with your theme

    Our plugins are carefully crafted to keep your site fast, the html is easy to read and extend and we provide the option to disable js and css files from the settings page.

  • Well documented

    Our plugins are well documented with in our knowledge base. It’s a great way to find instant answers or read tutorials to almost every question!.

  • Excellent support

    All our plugins come with full support. We’re here to help and offer expert advice on how to get the most out of your plugin.

  • Money back garantee

    We have a very simple refund policy. We will try to fix issues first. If we can't, we will definitely give your money back.

  • Regular updates

    We are regularly working to improve the plugin by adding new features, fixing bugs and keeping updated with the latest WordPress version.

Back To Top