Semantic Tags and CSS Display Flex
Introduction
Modern web development focuses not only on how a website looks, but also on how well it is structured and understood by browsers, search engines, and assistive technologies. Two important concepts that help achieve this are HTML Semantic Tags and CSS Flexbox (display: flex). This blog explains both topics clearly with examples and practical use cases.
What Are Semantic Tags?
Semantic tags are HTML elements that clearly describe their meaning and the role of the content they contain. Unlike generic tags such as
and , semantic tags provide information about the structure of a webpage.Why Semantic Tags Are Important
Improve readability of the code
Help search engines (SEO) understand page structure
Improve accessibility for screen readers
Make maintenance and teamwork easier
Common HTML Semantic Tags
**** **
Represents the top section of a webpage or a section. It usually contains logos, navigation links, or titles.
Used to define navigation links.
3.** **
Represents a thematic grouping of content.
- *
*
Used for independent, reusable content such as blog posts or news articles.
5.** **
Contains related content like ads, links, or side notes.
Represents the bottom section of a page or section.
What Is CSS Display Flex?
display: flex is a CSS layout model known as Flexbox. It is used to design responsive layouts easily by aligning and distributing space among items in a container.
Why Use Flexbox?
Easy alignment (horizontal & vertical)
Responsive design support
Less complex CSS compared to floats and positioning
Flex Container and Flex Items
Flex Container: The parent element where display: flex is applied
Flex Items: The child elements inside the container