Menu
I want to build a questions and answers page.
It is not a list, it is not tabular data and I am not sure if or how I should use <dl><dt><dd>.
What is the best semantic way to build it and to format it with css?
411
One of the most important features of HTML5 is its semantics. Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are, and browsers know how to display them.
Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way. Elements such as <header> , <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
I always use <dl> for FAQs. Typically making the <dt> an anchor for the index of questions to link.
edit...
I should mention, this is my interpretation of the most semantic approach. As I see it, this is exactly the sort of thing <dl> is meant to mark up.
As for CSS, it's really subjective. I do typical heading-ish styles for the <dt>, with a high font-weight, maybe slightly higher font-size, and maybe greater letter/word spacing.
Whatever integrates well with the rest of your visuals on the site and makes the relationship between the question and answer immediately obvious....
169
I'd go with the simplest model; each question is a heading, with answers in paragraph tags. Clear, logical and semantically sane, I think.
The reason I wouldn't use the definition list tags mentioned is that I don't think, from a pure semantic point of view, that questions and answers fit the mould of pure terms and definitions.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
