Problem Statement
Explain the difference between <div> and semantic tags like <section>.
Explanation
The div element and semantic tags like section serve different purposes in HTML structure, and understanding when to use each is important for writing quality code. The div element is a generic container with no semantic meaning. It is used purely for grouping content for styling or JavaScript purposes. When you use div, you are not conveying any information about what the content represents. It is semantically neutral. Divs are appropriate when you need containers for layout, styling, or scripting, but the content does not fit any semantic category. For example, wrapper divs for CSS grid layouts, container divs for centering content, or divs for JavaScript interactions where semantic meaning is not relevant. Semantic tags like section, article, header, footer, and nav have specific meanings that convey the purpose of their content. The section element represents a thematic grouping of content, typically with a heading. It has semantic meaning that tells browsers, search engines, and assistive technologies that this content forms a distinct section. When screen readers encounter section, they can announce it as a region and help users navigate by sections. Key differences include semantic meaning, where div has none and section indicates thematic content. Accessibility shows div provides no landmarks while section creates semantic structure for assistive technologies. SEO benefits differ, with div being ignored semantically while section helps search engines understand content organization. Document outline is affected, as div does not contribute while section creates outline structure. Best practices vary, with div for styling and layout, section for meaningful content groupings. When to use div includes layout containers like wrappers, grid items, flex containers, purely visual groupings with no semantic meaning, styling hooks where no semantic element fits, JavaScript targets that need generic containers, and situations where no semantic element accurately describes the content. When to use section includes thematic groupings with headings, distinct portions of articles or pages, chapters or subsections of content, tabbed content areas, grouped related content that forms a unit, and content that would appear in a table of contents. Other semantic alternatives include article for self-contained distributable content, aside for tangentially related content, nav for navigation blocks, header for introductory content, footer for footer content, and main for the primary content. The choice between div and semantic tags is not about styling. You can style semantic elements just as easily as divs. The choice is about meaning and structure. Use semantic elements when they accurately describe your content. Use divs when you need generic containers without semantic implications. Common mistakes include over-using divs when semantic elements would be more appropriate, using semantic elements just for default styling rather than meaning, nesting semantic elements incorrectly, using section as a replacement for div everywhere without considering semantic meaning, and forgetting that multiple semantic elements can be used together. Best practices include choosing the most specific semantic element that accurately describes your content, using div when no semantic element fits, not using semantic elements just for styling purposes, combining semantic HTML with appropriate ARIA attributes for complex interfaces, considering how screen readers will interpret your structure, and remembering that semantic HTML improves accessibility, SEO, and code maintainability. Practical example includes a blog page where the page header with logo and navigation should use header and nav, the main article content should use article with sections for different topics, a sidebar with related posts should use aside, the page footer should use footer, and layout containers for CSS grid or centering should use div. Understanding the difference between div and semantic tags demonstrates knowledge of modern HTML best practices and is frequently discussed in technical interviews, especially for front-end positions.