Build Q&A HTML View

The Q&A HTML markup will not use div elements. Instead, W3 specification says that we should the dl grouping content element for “question and answer” type content. Okay, looking at the specification, you will want the container to be a dl, question to be a dt, and answer to be a dd element.

You’ll add the styling class attributes using the BEM standard. You’ll embed the PHP variables and then sanitize them.

Next, you’ll add the visual indicator, which will be a Dashicons font icon. Let’s look at the different options and discuss variations to fit your needs. You’ll also make it more accessible using aria and screen-reader-text.

Next, you’ll add microdata to make the markup more content-centric expression. Microdata gives more semantic meaning to the HTML for software that reads the actual HTML. We’ll use the Question and Answer microdata from schema.org.