The purpose of a media query is to apply CSS styles based on the characteristics of the device or screen displaying the web page. Media queries allow for different CSS styles to be applied to different devices and screen sizes, making it possible to create responsive designs that adapt to the user's device.
A media query is a CSS technique that uses a combination of media types and media features to apply different styles to different devices. Media types specify the type of media the styles should be applied to, such as screen or print, while media features specify the characteristics of the device or screen, such as screen size or screen resolution.

A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS.

Semantic tags, also known as semantic elements, are HTML elements that describe the meaning of the content they contain. These tags give meaning to the structure of the content, making it easier for search engines, assistive technologies and other web browsers to understand the purpose of the content.