DEV Community

Vinayagam
Vinayagam

Posted on

Semantic Tags and Flexbox: Easy Guide with Examples

1.What are semantic tags in HTML?
Answer:
Semantic tags are HTML tags that clearly describe their meaning and purpose to both the browser and the developer.
ex:header,nav,article,footer.

2.Why are semantic tags important?
Answer:
Semantic tags improve:

  • Code readability
  • SEO (Search Engine Optimization)
  • Accessibility for screen readers

3.Difference between <div> and semantic tags?
Answer:
div has no meaning.
Semantic tags have meaning and clearly define the content.

4.What is the use of <article> tag?
Answer:
The <article> tag is used for independent, self-contained content like blog posts, news articles, etc.

5.What is Flexbox?
Answer:
Flexbox is a CSS layout model used to arrange elements in rows or columns and align them easily.

6.What does display: flex do?
Answer:
It converts a container into a flex container and its children into flex items.

7.What is the default direction of Flexbox?
Answer:
The default direction is row (left to right).

8.Difference between justify-content and align-items?
Answer:

  • justify-content aligns items horizontally
  • align-items aligns items vertically

9.Which tag is best for navigation links?
Answer:
tag.

10.Which Flexbox property controls spacing between items?
Answer:
justify-content and gap.

11.What are the advantages of using semantic tags with Flexbox?
Answer:

  • Clean structure
  • Easy layout design
  • Better accessibility
  • Professional web pages

Top comments (0)