1. What is the difference between HTML elements and tags?
An HTML element usually consists of a start tag and an end tag, with the content inserted in between:
<tagname>Content goes here…</tagname>
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.
Some basic tags are:
- A text header, denoted using the <h1> , <h2> , <h3> , <h4> , <h5> , <h6> tags.
- A paragraph, denoted using the <p> tag.
- A horizontal ruler, denoted using the <hr> tag.
- A link, denoted using the <a> (anchor) tag.
So the key difference is HTML Tags Vs Elements is that an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag either opening or closing is used to mark the start or end of an element.
2. What new features were added to HTML5?
It introduced a number of semantic elements, which is to say elements that convey meaning. Some of the new semantic elements are <header>, <footer>, <section>, and <article> . They are semantic in that they are not just simple containers, but they tell the browser more about their contents.
There are additional form element types, like “number”, “date”, “calendar” and “range”. Video and audio elements have also been added, as well as new graphic elements, such as <svg> and <canvas>.
3.What browsers support HTML5?
All modern browsers support HTML5, however some older browsers do not. Luckily, most browsers will simply handle the new elements as inline elements. You can then use CSS to change certain elements to be displayed as block-level elements where needed.
4.Why Meta tags are used in HTML?
Meta tags in HTML are used by the developer to tell the browser about the page description, author of the template, character set, keywords and many more.Meta tags are used for search engine optimization to tell the search engine about the page contents.
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale = 1.0">
<meta name=”description” content=”HTML interview questions”>
<meta name=”author” content=”Author Name”>
<meta name=”copyright” content=”All Rights Reserved”>
5. What is iframe in HTML?
An iframe is used to display different document content inside the different document content in a rectangular region in the browser. When different document content is embedded into a current HTML content, then it is known as an inline iframe.
Iframe tag is written as <iframe>.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<iframe src=”demo_iframe.htm” height=”200" width=”300"></iframe>
</body>
</html>
6.Why is the external style sheet useful?
External style sheet is very useful as we write all the styling codes in a single file and it can be used anywhere by just referring to the link of that external style sheet file.
So, if we do any changes in that external file, then the changes can also be observed on the webpage. Thus we can say that it is very useful and it makes your work easy while working on larger files.
7. What are the differences between relative and absolute in CSS?
The main difference between relative and absolute is that relative is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent.It means, if we write left:10px then the result will be 10px far from the left edge of the parent element.
8.How is the concept of inheritance applied in CSS?
Inheritance is a concept in which the child class will inherit the properties of its parent class. It is a concept which is been used in many languages and is the easy way of defining the same property again.
It is used in CSS to define the hierarchy from the top level to the bottom level. Inherited properties can be overridden by the children’s class if the child uses the same name.
Example:
Body {font-size: 15px;}
And another definition is being defined in the child class
Body {font-size: 15px;}
H1 {font-size: 18px;}
All the paragraph text will be displayed using the property and will be defined in the body except for the H1 style which will show the text in font 18px only.
9.What are CSS media queries and what are they used for?
CSS media queries are the filters that make responsive web design (RWD) possible. With the introduction of laptops, tablets, and smartphones with screens of varying sizes and aspect ratios, RWD is crucial for modern day app development. CSS media queries adjust content style based on device characteristics like width, height, orientation, resolution, and display type. When used properly, the end result is a website or app capable of providing a sleek UI/UX across multiple devices.
10.What is a CSS preprocessor? Would you recommend using one for this project?
A preprocessor is an abstraction layer built on top of CSS. Preprocessors extend the functionality of CSS by offering powerful features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors — try asking the developer which one they prefer more. Selecting a preprocessor really boils down to preference, and it can be revealing to see how a particular developer might decide to use one over the other for your project.