What is semantic elements in HTML ?

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

List of new semantic elements

The semantic elements added in HTML5 are:

<article>
<section>
<aside>
<details>
<main>
<header>
<footer>
<nav>
<summary>
<time>

and so on.

What is the difference between HTML elements and tags?

Elements

Each part of a web page, such as a paragraph, an image, a link or anything else you can interact with, is an element. Each type of element has its own behavior — for example you can click on links, or type in text boxes.

What are attributes and how do you use them?

ach tag can also have additional attributes, which change the way the tag behaves or is displayed. For example, an <input> tag has a ‘type’ attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options.

<!-- Text field -->
<input type="text" />

<!-- Checkbox -->
<input type="checkbox" />

<!-- Radio button -->
<input type="radio" value="on" />

What’s the difference between a block-level element and an inline element?

Block

As the name suggests, a block-level element is drawn as a block that stretches to fill the full width available to it (the width of its container) and will always start on a new line.

Examples of elements that are block-level by default: <div> <img> <section> <form> etc.

Inline

Unlike the block-level elements, inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page. When a line of text gets to the end of the space available, it wraps onto the next line and happily keeps going. If you were to tack more text onto an existing line of text, it will stay on the same line, as if it was all part of the same text to begin with.

Examples of elements that are inline by default: <span> <b> <a> <strong> <input> etc.

CSS3

CSS (cascading style sheet) is style sheet language to style a web page.

It is developed by Hakon Wium Lie and Bret Bos. It was initially marked in the year 1998. It helps in defining the font, color, and other properties. CSS pre-processors are used to write more effective CSS that splits it into multiple files and can be used a large number of functions along with variables like Sass.

Let’s see some CSS3 interview questions.

Distinguish between CSS2 and CSS3.

The differences between CSS2 and CSS3 are as follows:

CSS3 is divided into two various sections which are called a module. Whereas in CSS2 everything accedes into a single document with all the information in it.
CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.
In CSS3, we will find that many graphics related characteristics have been introduced like Border-radius or box-shadow, flexbox.
In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.

Explain the CSS box model and its elements?

The CSS box model consists of the following items that are: Margin, Border, padding, and content. A margin is the topmost layer and in which the overall structure is described. A border is between margin and padding or it can be defined as the padding and content around with a border. The background color affects the border. Padding is space between border and content. It means if an element has the background color and that color will also fill in padding. Content is the actual data shown.

Above image shows the box model in CSS.

Explain Flexbox and CSS grid?

Flexbox is a one-dimensional layout tool that is very useful in smaller areas of the site. The main feature of this is to align items in a horizontal or vertical axis. It is used to space the item out automatically, with other layout options, and in a defined order to display the items.

CSS grid is almost a two-dimensional layout tool for the single page. It is used for layouts for both the horizontal and vertical axis unlike the flexbox tool, which is used only for one axis at a time.

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

Inline method — It is used to insert style sheets in HTML document
Embedded/Internal method — It is used to add a unique style to a single document
Linked/Imported/External method — It is used when you want to make changes on multiple pages.

what is CSS Universal Selector?

The universal selector is used as a wildcard character. It selects all the elements on the pages.

Like that

<style>
* {
color: green;
font-size: 20px;
}
</style>

What are the advantages of External Style Sheets?

You can create classes for reusing it in many documents.
By using it, you can control the styles of multiple documents from one file.
In complex situations, you can use selectors and grouping methods to apply styles.

What is the purpose of the z-index and how is it used?

The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

Auto: Sets the stack order equal to its parents.
Number: Orders the stack order.
Initial: Sets this property to its default value (0).
Inherit: Inherits this property from its parent element.

That’s for today. I hope you find in useful.

Wish me luck !

Top HTML5 And CSS3 Interview Questions With Answers