Meta tags provide information about the properties of the webpage given to the browser. It will impact how the page will be displayed in the browser.

They don’t appear on the webpage, but they are present in the head tag of the HTML document, as they are machine parsable, web browsers can comprehend. They are the metadata of the webpage.

Meta tags are crucial as they will tell the browser; what the webpage is all about and; how it can display in the search results in the browser. It will increase the web page’s visibility. Thus, they are crucial for Search Engine Optimization.

1. charset attribute — It tells the browse in which character set, the website is written.
The above code tells the browser to use UTF-8 character encoding. UTF-8 is the most common character encoding used. It encodes human-readable text into a machine language or vice versa.

<meta charset="UTF-8">

2. content attribute

It gives the value of the information associated with the http-equiv or name attribute.

<meta content="text">

3. http-equiv attribute

It acts as an HTTP response header (carries information for Request and Response body) to define settings without using an actual HTTP response header.
The HTTP-equiv and content pair provide the HTTP header with its corresponding value.

< meta http-equiv="refresh" content="30">

• content-security-policy

It adds security to the webpage as it protects from data theft, injection, or other malpractice.

<meta http-equiv="content-security-policy" content="default-src'self'">

• content-type

Specifies the type of the data in the body of an entity by sending type/subtype as information.

<meta http-equiv="content-type" content="text/html">

• default-style

It tells to use the specified stylesheet as the default stylesheet if no stylesheet is linked.

<meta http-equiv="default-style" content="default_stylesheet.css">

• refresh

Defines a time after which the document has to refresh itself. In the code below, it will refresh the page after every 30 seconds.

<meta http-equiv="refresh" content="30">

4. name attribute

It specifies the name of the metadata.

<meta name="author" content="John Doe" >

• applicationName

It specifies the name of the web application.

<meta name="applicationName" content="homepage">

• author

It specifies the name of the author of the web application.

<meta name="author" content="John Doe">

• generator

In this tag, we mention the name of the program or software we used to create our website.

<meta name="generator" content="FrontPage 4.0">

• keywords

In this tag, we give a list of keywords that will give more information to the search engines. When a user searches for a keyword, that is present in this tag, then the search engine will show this website as one of the search results.

eg. keywords for a hospital website

<meta name="keywords" content="best cancer hospital in India, hospitals inInfia, the best neurologits in India, a best orthopedic hospital in India, super speciality hospital near me">

• viewport

It is the area where our webpage will b displayed. In this tag in the content attribute, the values passed are the width=”device-width” and the initial scale=1.0.
Width tells the browser to display the page befitting the device’s screen width. The initial scale is the initial zoom when visiting a page.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Many of us are familiar with HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) as they are the core technologies used for Front End Web Development, one of it is used to construct and layout the webpage, and another one is responsible for the styling, and appearance of the webpage.

The browser first layouts the structure of the page and then combines the CSS styles to the document. But, ever wondered how does the browser come to know which styling is to be applied to which element in external CSS? Here, CSS Selector plays the role.

CSS Selectors select the HTML element. and apply the set of CSS rules to the selected element.

The CSS Selectors are classified into five types.

1. Simple Selectors — Simple Selectors are the most basic type of selectors as it selects the HTML elements based on the type of element, id, and class.

• Type Selector — Type Selector will select all the elements in the document of the type mentioned.

Syntax:

• Class Selector — A Class attribute applies the same set of CSS rules on more than one element.
  Class Selector will select all the elements which have a class attribute as the mentioned class name.

eg. class="class-name" It will select all the elements having class name as class-name.

Syntax:

• Id Selector — An Id attribute is assigned when the element is unique.
  Id Selector will select the element which has an Id attribute as the mentioned Id name.

eg. id="id-name" It will select the element having id as id-name.

Syntax:

• Universal Selector — Universal Selector selects all the elements of a document or selects all the elements of type, class, or id mentioned.

Syntax:

2. Combinators — Combinators combines the selectors using their relationship with each other.

• Descendant Selector — The Descendant Selector selects all the descendants of the specified element.

eg. select all <p> elements that are present within a <div> element irrespective of its level within the <div> block.

Syntax:

• Child Selector — The Child Selector selects all child elements of a specified type of a specified parent element.

eg. select all <p> elements that are directly connected to the <div> element within <div> block.

Syntax:

• Adjacent Sibling Selector — Adjacent Sibling Selector is used to selecting a specified element that appears right after the other specified element block.

eg. select an <p> element that appears right after a <div> block.

Syntax:

• General Sibling Selector — General Sibling Selector is used to select all the specified elements appearing after the other specified element block.

eg. select all <p> elements appearing after the <div> block.

Syntax:

3. Pseudo Class — The Pseudo Class defines a special state of the element. When the particular state is achieved, CSS is applied.
A few of the most commonly used Pseudo Classes are:

4. Pseudo Element — The Pseudo Element selects a specific part of the content for styling.
The commonly used Pseudo-elements are:

5. Attribute Selector — The Attribute Selector selects an HTML element having a specified attribute or an attribute value.
The commonly used Attribute Selectors are: