HTML5 and CSS3 Interview Questions & Answers

HTML5 and CSS3 Interview Questions & Answers, Most commonly asked HTML5 & CSS3 interview questions with answers. Apply confidently for Full Stack Web Developer jobs.

Uplatz brings you this training on the most commonly asked interview questions and answers on HTML5 and CSS3.

By learning and understanding deeply the popular interview questions (with answers) of HTML5 and CSS3, you can confidently apply for Web Developer / Frond End Developer / Full Stack Engineer (MERN, MEAN stacks) roles.

This course explains the solutions to common questions asked in the recent Web Developer (HTML and CSS) interviews and comes with a freely downloadable booklet on the same.

HTML5 and CSS3 interview questions tutorial will help you crack the job interviews which can be a turning point in your career!

With these top hand-picked HTML/CSS interview questions, you will be able to gain sound knowledge on HTML5 and CSS3 concepts and their practical usage in web development & design.

Background

HTML5 is the latest version of the HTML language, HTML stands for Hyper Text Markup Language, it’s a universal World Wide Web Markup language which allows to create and design web pages to be viewed on the internet.

HTML5 supports all existing web pages.

The new features of HTML5 include:

• Support media element like video and audio
• Local storage
• Supporting some new elements and custom attributes
• New form elements like url, date, range, time, color etc.

CSS is the key presentation technology that is used in website design. CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages.

Prior to CSS, nearly all of the presentation attributes of HTML documents were contained within the HTML markup (specifically inside the HTML tags); all the font colors, background styles, element alignments, borders and sizes had to be explicitly described within the HTML.

As a result, development of the large websites became a long and expensive process, since the style information were repeatedly added to every single page of the website.

To solve this problem CSS was introduced in 1996 by the World Wide Web Consortium (W3C), which also maintains its standard. CSS was designed to enable the separation of presentation and content. Now web designers can move the formatting information of the web pages to a separate style sheet which results in considerably simpler HTML markup, and better maintainability.

CSS3 is the latest version of the CSS specification. CSS3 adds several new styling features and improvements to enhance the web presentation capabilities.

Some key features of CSS3 include:

• You can easily apply same style rules on multiple elements.
• You can control the presentation of multiple pages of a website with a single style sheet.
• You can present the same page differently on different devices.
• You can style dynamic states of elements such as hover, focus, etc. that isn’t possible otherwise.
• You can change the position of an element on a web page without changing the markup.
• You can alter the display of existing HTML elements.
• You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
• You can create animations and transitions effects without using any JavaScript.
• You can create print friendly version of your web pages.

HTML5 and CSS3 together bring enhanced functionalities in web page development like multi-media support to add audio/Video files, canvas, real-time communication, local storage, and robust design. Embracing this technology will surely benefit you and your organisation.

HTML5 Interview Questions (some examples)

1) What is HTML5?

HTML5 is the latest version of the HyperText Markup Language that can be referred to the WWW (World Wide Web) primary language, this markup language enhances a text file with bits of code, and this code which we can say as “markup” describes the structure of the document.

HTML5 provides some standard features like that of CSS, HTML, JavaScript, and DOM, which in turn will reduce the requirement of external plugins. It’s more markup to replace scripting, better error handling, etc. HTML5 is device independent.

HTML5 introduces some new features that can be used to change the way of user interaction with documents including:

• Adding new parsing rules to enhance flexibility.
• Adding New attributes.
• Allow offline editing.
• Support (Web SQL), – A common standard for storing data in SQL databases.
• Support Protocol and MIME handler registration.

2) What is the difference between HTML and HTML5?

Differences between HTML and HTML5 are given below:

• HTML5 has high-level video and audio support. High-level video and audio support is not a part of the version and specifications in the previous HTML.
• Canvas, SVG and other virtual vector graphics are supported in HTML5. In HTML, if we want to implement vector graphics, that was only possible by using third party library like VML, Silver-light, etc.
• In HTML5, SVG and MathML can be used in text. This is not possible in HTML.
• In HTML5, Web SQL database, application cache and web storage is used as permanent storage. Browser cache can be used as temporary storage in HTML.
• HTML5 is more mobile friendly. HTML is less mobile friendly.
• In HTML5, Doctype declaration is simple and easy. Doctype declaration is long and complicated in HTML.
• HTML5 allows drag and drop effect. HTML does not allow drag and drop effect.
• Attributes of Async, charset, and ping are available in HTML5. These attributes are not available in HTML.
• HTML5 supports JavaScript to run in the background. HTML does not support JavaScript to run within the web browser.
• We can draw shapes like rectangle, circle, and triangle in HTML5. It is not possible to draw shapes like rectangle, circle, triangle etc. in HTML.

3) What is <!DOCTYPE>? What are the different types of <!DOCTYPE> that are available?

The <!DOCTYPE> declaration provides instruction to the web browser to understand what information it should be display, and the need to start with <!DOCTYPE> declaration. In HTML5, DOCTYPE declaration is very short, and case-insensitive, and <!DOCTYPE html> is written at the top of every HTML5 page.

The following DOCTYPE are also supported in HTML5:

• <!DocTYpe html>
• <!dOCtype html>
• <!doctype html>

There are 3 types of DOCTYPES as mentioned below:

• Strict Doctype
• Frameset Doctype
• Transitional Doctype

4) What are the new tags in Media Elements in HTML5?

The new tags in Media Elements in HTML5 are enlisted below:

• <audio>: Apply for multimedia contents like sounds, audio streams or music, embed audio content without the requirement of any additional plug-in like flash player.
• <video>: Apply for video content like video streams or movie clip, embed video content etc.
• <source>: Apply for multiple media resources in media elements, such as audio, video, picture etc.
• <embed>: Apply for an external application or embedded content (a plug-in).
• <track>: Apply for text tracks in the media elements such as video or audio. This tag is used for subtitles or caption files while the video media is playing.

5) What is a tag in HTML5?

A tag is a special content in HTML5, which is surrounded by an angle bracket (<,>). A slash (/) symbol is used to close the tag after completing the block.

E.g.

<title> This is my Browser </title>

An HTML5 tag is a set of characters that develop a formatted command for a web page. These formatted commands communicate and send the instruction to the Browser.

6) What is the minimum number of HTML5 tags that are required to create a Web page?

Minimum 3 HTML5 tags are required to create a Web page, such as (<HEAD>, <BODY>, <HTML>).

7) What is the importance of Drag and Drop in HTML5?

Drag and Drop is the most important User Interface concept which makes it easy to grab an object and Drag it at the place you want with the help of a mouse click.

Some common features that are mostly used by Drag and Drop operation include move, link or copy.

We can drag an image using elements, type = <img draggable = “true”>, to make an image draggable and set the draggable image attribute to true.

8) Explain new Form input types in HTML5

HTML5 has 14 new forms input types:

• Date: This is a Date picker, we can pick a date by using type = “date”.
• Week: This is a Week picker, we can pick a week by using type = “week”.
• Month: This is a Month picker, we can pick a month by using type = “month”.
• Time: This is a Time picker, we can pick the time by using type = “time”.
• Datetime: This is a combined date and time, we can pick the combination of date and time by using type = “datetime”.
• Datetime-local: A combined local date and time, we can pick the combination of local date and time using type = “DateTime-local”.
• Email: Allows one or more Email Addresses, we can enter multiple email addresses using type = “email”.
• Tel: Allows different phone numbers around the world. A phone number is validated by the client-side. We can enter a phone number using type = “tel”.
• Search: Allows to search queries by input text. We can enter multiple queries using type = “search”.
• Number: Allows inserting a numerical value with additional attributes such as min, max. etc., and we can enter multiple numerical values using type = “number”.
• Url: A url input type, that is used for the web address. In a single url, we can use multiple attributes using type = “url”.
• Color: Allows to select multiple colors, we can pic multiple color using type = “color”.
• Range: Allows to insert a numerical value within a specific range, Range is similar to the number but it is much specific. We can enter a numerical value within a range using type = “range”.
• Placeholder: Allows to display a short hint (usually in a light color) in the input fields, before we enter the value. We can write a short hint in the input field by using type = “placeholder”.

9) What is image map in HTML5?

Image maps are a combination of URL and images, where clicking on these images (clickable area of the image) will open different new web pages.

Two types of image maps are available in HTML5, i.e. client side and server side:

The client-side image map is created by using two elements <area> and <map>, where the map holds the map information and the area element takes the attributes to define each section of the map. Server-side image map created by using <usemap> attribute, the usemap attribute is the name of our map.

10) How do you write a copyright symbol on a web browser page?

In order to write a copyright symbol, we need to type © or © in an HTML5 file.

11) How to optimize website assets?

We need to understand some basic optimization rules, in order to optimize website assets. Initially, we should decrease the download size and make fewer http requests.

To optimize website assets we can follow the below techniques:

• File compression
• File concatenation
• CDN Hosting
• Offloading assets
• Re-organizing
• Refining code

12) What is the use of MathML Element in HTML5?

The word MathML (Mathematical Markup Language) is a markup language, that is used to show scientific and mathematical expression on the web. MathML is a form of XML (extensible markup language) to describe the Math notation.

We can use <math>…</math> tags inside the HTML5 documents for implementing MathML element.

13) What are the various formatting tags in HTML5?

HTML5 has some old and new formatting tags as given below:

• Marked text: Represents highlighted text for Reference purposes. We can use <marks> tags for text highlight.
• Deleted text: Specifies the deleted block of text. We can use <del> tags to implement a deleted text.
• Emphasized text: Defines the emphasized text. We can use <em> tags to implement an emphasized text.
• Inserted text: Inserts a block of text into a document. We can use <ins> tags to implement an inserted text.
• Small text: Display inserted text in a small size. We can use <small> tags to implement a small text.
• Superscript text: This is a superscripted text. We can use <sup> tags to implement a superscript text.
• Subscript text: This is a subscripted text. We can use <sub> tags to implement a superscript text.

14) Why do we use HTML5?

HTML5 supports animation, drawing, audio, video, etc and it easily embeds a video on the web page. It does not require any additional software like Flash for watching videos.

Some of the important reasons to use HTML5 are given below:

• Legacy and cross-browser support
• Better interactions
• Smarter storage
• Cleaner code

15) What is a hyperlink? Does it only apply to text?

The hyperlink is a link that allows a user to move from one web page to another web page when clicked. Hyperlink concept is used on text and as well as image, and we can convert an image into a link with the help of <a href = “ ”….</a>> tags.

16) Explain the concept of web storage in HTML5

Web storage provides the facility to store the data of our web applications locally into the user’s browser. It can store up to 10 MB data. Web storage helps to increase the performance of our applications.

There are two types of web storage that are used to store data locally in HTML5:

• Local storage: This stores the data that will not expire or clear automatically when a user closes or reopens a browser.
• Session Storage: This stores data for one session only(i.e, a user who is surfing the internet or website). Once the browser is closed, session data will automatically delete from the web browser.

CSS and CSS3 Interview Questions (some examples)

1) What is CSS?

The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

2) What is the origin of CSS?

Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

3. What are the different variations of CSS?
The variations for CSS are:

• CSS 1
• CSS 2
• CSS 2.1
• CSS 3
• CSS 4

4) What are the limitations of CSS?

Limitations of CSS are:

• Ascending by selectors is not possible
• Limitations of vertical control
• No expressions
• No column declaration
• Pseudo-class not controlled by dynamic behavior
• Rules, styles, targeting specific text not possible

5) What are the advantages of CSS?

Advantages of CSS are:

• Bandwidth
• Site-wide consistency
• Page reformatting
• Accessibility
• Content separated from presentation

6) What are CSS frameworks?

It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language.

7) Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

8) In how many ways can a CSS be integrated as a web page?

CSS can be integrated in three ways:

• Inline: Style attribute can be used to have CSS applied HTML elements.
• Embedded: The Head element can have a Style element within which the code can be placed.
• Linked/ Imported: CSS can be placed in an external file and linked via link element.

10) What benefits and demerits do External Style Sheets have?
Benefits of External Style Sheets are:

• One file can be used to control multiple documents having different styles.
• Multiple HTML elements can have many documents, which can have classes.
• To group styles in composite situations, methods as selector and grouping are used.

Demerits of External Style Sheets are:

• Extra download is needed to import documents having style information.
• To render the document, the external style sheet should be loaded.
• Not practical for small style definitions.

11) Discuss the merits and demerits of Embedded Style Sheets?
Merits of Embedded Style Sheets:

• Multiple tag types can be created in a single document.
• Styles, in complex situations, can be applied by using Selector and Grouping methods.
• Extra download is unnecessary.

Demerits of Embedded Style Sheets:

• Multiple documents cannot be controlled.

12) What does CSS selector mean?

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

13) Enlist the media types CSS allows?

The design and customization of documents are rendered by media. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network.

14) Differentiate logical tags from physical tags?

• While physical tags are also referred to as presentational mark-up, logical tags are useless for appearances.
• Physical tags are newer versions while logical tags are old and concentrate on content.

15) Differentiate Style Sheet concept from HTML?

While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style sheets have better browser capabilities and formatting options.

16) Describe ‘ruleset’?

Selectors can be attached to other selectors to be identified by ruleset.

It has two parts:

• Selector, e.g. R and
• declaration {text-indent: 11pt}

17) Comment on the Case-sensitivity of CSS?

Although, there are no case-sensitivity of CSS, nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case-sensitive.

18) Define Declaration block?

A catalog of directions within braces consisting of property, colon and value is called declaration block.
e.g. [property 1: value 3]

19) Enlist the various fonts’ attributes?

Font attributes are the following:

• Font-style
• Font-variant
• Font-weight
• Font-size/line-height
• Font-family
• Caption
• Icon

20) Why is it easy to insert a file by importing it?

Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions.

Syntax:

@import notation, used with <Style> tag.