HTML is used to create the basic structure of the FAQs. Each question - answer pair is typically wrapped in a container element, such as a <div>
. The question can be placed inside a <h3>
or <h4>
tag, and the answer can be placed inside a <p>
tag.
<div class="faq">
<h3>What is the return policy?</h3>
<p>You can return any unused product within 30 days of purchase.</p>
</div>
CSS is used to style the HTML elements. You can control the appearance of the questions and answers, such as font size, color, background color, and spacing.
.faq {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.faq h3 {
font-size: 18px;
color: #333;
}
.faq p {
font-size: 16px;
color: #666;
}
One popular way to display FAQs is in an accordion style, where only one answer is visible at a time. To achieve this, you can use HTML, CSS, and a bit of JavaScript.
<div class="accordion">
<div class="accordion-item">
<h3 class="accordion-header">How can I create an account?</h3>
<div class="accordion-content">
<p>Click on the 'Sign Up' button on the top - right corner of the page and follow the instructions.</p>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header">Is there a mobile app?</h3>
<div class="accordion-content">
<p>Yes, we have a mobile app available for both iOS and Android.</p>
</div>
</div>
</div>
.accordion-item {
border: 1px solid #ddd;
margin-bottom: 5px;
}
.accordion-header {
padding: 10px;
background-color: #f4f4f4;
cursor: pointer;
}
.accordion-content {
padding: 10px;
display: none;
}
.accordion-content.active {
display: block;
}
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const content = header.nextElementSibling;
content.classList.toggle('active');
});
});
Another method is to use collapsible lists. Similar to the accordion, but with a different visual style.
<ul class="collapsible-list">
<li>
<h3>What payment methods do you accept?</h3>
<p>We accept credit cards (Visa, MasterCard, American Express) and PayPal.</p>
</li>
<li>
<h3>How long does shipping take?</h3>
<p>Shipping usually takes 3 - 5 business days.</p>
</li>
</ul>
.collapsible-list li {
border-bottom: 1px solid #eee;
padding: 10px;
}
.collapsible-list li h3 {
cursor: pointer;
}
.collapsible-list li p {
display: none;
}
.collapsible-list li h3:hover + p {
display: block;
}
Use semantic HTML tags like <article>
or <section>
to wrap the FAQ section. This improves the accessibility and search - engine optimization (SEO) of the page.
<article class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq">
<h3>Do you offer international shipping?</h3>
<p>Yes, we offer international shipping to most countries.</p>
</div>
</article>
Ensure that your FAQs are responsive, meaning they look good on different screen sizes. You can use media queries in CSS to achieve this.
@media (max - width: 768px) {
.faq {
padding: 5px;
}
.faq h3 {
font-size: 16px;
}
.faq p {
font-size: 14px;
}
}
aria - expanded="false"
to the accordion header when the content is collapsed and aria - expanded="true"
when it is expanded.<h3 class="accordion-header" aria - expanded="false">Are there any discounts available?</h3>
.accordion-header:focus {
outline: 2px solid #007bff;
}
Creating FAQs with HTML and CSS is an essential skill for web developers. By understanding the fundamental concepts, usage methods, common practices, and best practices, you can build effective and user - friendly FAQ sections. Whether you choose an accordion style, collapsible list, or a simple structure, always prioritize accessibility and performance to provide the best experience for your users.