9. HTML Q & A

(Approximate Time: ~ 1.5 hours)

What is HTML?

HTML stands for Hyper Text Markup Language. It is a language of the World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web. HTML makes the text more interactive and dynamic. It can turn text into images, tables, links. HTML pages are saved by adding .html or .html in web page name.

What is the difference between HTML elements and tags?
Elements Tags
The element is an individual component of the HTML web page or document. It represents semantics or meaning. For example, the title element represents the title of the document. It is the root of the HTML document which is used to specify that the document is HTML. For example, the Head tag is used to contain all the head element in the HTML file.
What are Attributes and how do you use them?

Each tag has additional attributes that change the way the tag behaves or is displayed. For example, a <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.
Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags. But, they can never be in closing tags.

Example:

What is the difference between a block-level element and an inline element?
Block Inline
A block-level element is drawn as a block that stretches to fill the full width available to it i.e, the width of its container and will always start on a new line.
Elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.
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.
Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.
When are comments used in HTML?

To understand the code easily, you can add code comments to your HTML document. These are not displayed in the browser, but they help you in leaving notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by <!– and the end is marked by — >. Anything in the middle will be completely ignored, even if it contains valid HTML.

For example:

What are the HTML tags used to display the data in the tabular form?

The list of HTML tags used to display data in the tabular form include:

Tag Decsription
<table> It defines a table
<tr> This tag defines a row in a table
<th> It defines a header cell in a table
<td> This is used to define a cell in a table
<caption> It defines the table caption
<colgroup> It specifies a group of one or more columns in a table for formatting
<col> This is used with <colgroup> element to specify column properties for each column
<tbody> This tag is used to group the body content in a table.
<thead> It is used to group the header content in a table
<tfooter> It is used to group the footer content in a table
How to create a Hyperlink in HTML?

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:

  • Unvisited link – It is displayed, underlined and blue.
  • Visited link – It is displayed, underlined and purple.
  • Active link – It is displayed, underlined and red.

The syntax of Hyperlink in HTML is:

Name some common lists that are used when designing a page.

There are many common lists used for design a page. You can choose any or a combination of the following list types:

  • Ordered list – The ordered list displays elements in a numbered format. It is represented by <ol> tag.
  • Unordered list – The unordered list displays elements in a bulleted format. It is represented by <ul> tag.
  • Definition list – The definition list displays elements in definition form like in a dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.

How to create a nested webpage in HTML?

The HTML iframe tag is used to display a nested webpage. In other words, it represents a webpage within a webpage. The HTML <iframe> tag defines an inline frame. For example:

What is an image map?

An image map is used for linking many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to include as part of an image mapping.

Does a hyperlink only apply to text?

No, hyperlinks can be used both on texts and images. The HTML anchor tag defines a hyperlink that links one page to another page. The “href” attribute is the most important attribute of the HTML anchor tag.

Syntax:

What is a Style Sheet?

A style sheet is used to build a consistent, transportable, and well-designed style template. You can add these templates on several different web pages. It describes the look and formatting of a document written in the markup language.

Explain the layout of HTML.

HTML layout specifies a way in which the web page is arranged. Every website has a specific layout to display content in a specific manner. Following are different HTML elements which are used to define the different parts of a webpage:

  • <header>: It is used to define a header for a document or a section.
  • <nav>: This defines a container for navigation links
  • <section>: It is used to define a section in a document
  • <article>: This is used to define an independent, self-contained article
  • <aside>: It is used to define content aside from the content
  • <footer>: It is used to define a footer for a document or a section
What is a marquee?

Marquee is used for the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically. You should put the text which you want to scroll within the <marquee>……</marquee> tag.

What are the tags used to separate a section of texts?

There are three tags that can be used to separate the texts:

  • <br> tag – Usually <br> tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line
  • <p> tag – This contains the text in the form of a new paragraph.
  • <blockquote> tag – It is used to define a large quoted section. If you have a large quotation, then put the entire text within <blockquote>……….</blockquote> tag.
What is the difference between DIV and SPAN in HTML?

The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line,such as inside a paragraph. Whereas, a div or division element is block-line which is equivalent to having a line-break before and after it and used to group larger chunks of code.

What is the purpose of using alternative texts in images?

The purpose of using alternative texts is to define what the image is about. During an image mapping, it can be confusing and difficult to understand what hotspots correspond to a particular link. These alternative texts come in action here and put a description at each link which makes it easy for users to understand the hotspot links easily.

How to create a new HTML element?

You can create new elements for the document in the following way:

It can be also be used in the HTML as:

Is the <!DOCTYPE html> tag considered as a HTML tag?

No, the <!DOCTYPE html> declaration is not an HTML tag.

There are many type of HTML, such as, HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct the web browser about the HTML page.

Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a “%” followed by hexadecimal digits.

What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

Syntax:

Example:

Target to a link:

What are the entities in HTML?

The HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. These characters are replaced because some characters are reserved in HTML.

Can you create a multi-colored text on a web page?

Yes, we can create a multi-colored text on a web page.  To create a multicolor text, you can use <font color =”color”> </font> for the specific texts that you want to color.

How to make a picture of a background image of a web page?

To make a picture a background image on a web page, you should put the following tag code after the </head> tag.

Here, replace the “image.gif” with the name of your image file which you want to display on your web page.

What is the use of a span tag? Explain with example.

The span tag is used for following things:

  • For adding color on text
  • To add background on text
  • Highlight any color text

Example:

What is the advantage of collapsing white space?

White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the HTML code into a much more readable format.

Is there any way to keep list elements straight in an HTML file?

By using indents, you can keep the list elements straight. If you indent each sub nested list in further than the parent list, you can easily determine the various lists and the elements that it contains.

Explain The Key Differences Between LocalStorage And SessionStorage Objects.

The key differences between localStorage and sessionStorage objects are as follows:

  • The localStorage object stores the data without an expiry date. However, sessionStorage object stores the data for only one session.
  • In the case of a localStorage object, data will not delete when the browser window closes. However, the data gets deleted if the browser window closes, in the case of sessionStorage objects.
  • The data in sessionStorage is accessible only in the current window of the browser. But, the data in the localStorage can be shared between multiple windows of the browser.
When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.

How to insert a picture into a background image of a web page?

To insert a picture into the background image, you need to place a tag code after the </head> tag in the following way:

Now, replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.

What happens if you open the external CSS file in a browser?

When you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using <link/> tag within another HTML document.

What is the hierarchy that is being followed when it comes to style sheets?

If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.

How do you create text on a webpage that allows you to send an email when clicked?

To change the text into a clickable link to send an email, you need to use the mailto command within the href tag. You can write it in the following way:

How are active links different from normal links?

The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link. Whereas, others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered a normal link.

What are the different tags to separate sections of text?

The <br> tag is one way to separate the lines of text. There are other tags like the <p> tag and <blockquote> tag that are also used to separate sections of text.

Are there instances where the text will appear outside of the browser?

By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.

Write an HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50

The HTML Code for the above problem is:

What is the advantage of grouping several checkboxes together?

The checkboxes don’t affect one another. But, grouping these checkboxes together help to organize them. Checkbox buttons can have their name and do not need to belong to a group. A single web page can have many different groups of checkboxes.

What happens if there is no text between the tags? Does this affect the display of the HTML file?

If there is no text present between the tags, there is nothing to format. Therefore, no formatting will appear. Some tags, such as the tags without a closing tag like the <img> tag, do not require any text between them.

What are the limits of the text field size?

The default size for a text field is around 13 characters. However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. Also, if the size attribute is set to 0, the size will be set to the default size of 13 characters.

What is the relationship between the border and rule attributes?

Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute is set to a nonzero value. Similarly, If the border attribute is not included, a default 1-pixel border appears when the rules attribute is added to the <table> tag.

What is SVG?

HTML SVG is used to describe the two-dimensional vector and vector or raster graphics. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with the text editor. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.

What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within the HTML form on the web page. This tag creates a “submit” or “reset” button. The button tag code is as follows:

List the media types and formats supported by HTML.

HTML supports a wide range of media formats for sound, music, videos, movies, and animations. Some of the extensions supported by each media format are:

  • Images– png, jpg, jpeg, gif, apng, svg, bmp, BMP ico, png ico
  • Audio– MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4
  • Video– MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 or MP4
What is Cell Spacing and Cell Padding?

Cell Spacing is referred to as the space or gap between the two cells of the same table. Whereas, Cell Padding is referred to as the gap or space between the content of the cell and cell wall or cell border.

Example:

What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

  • HTML is an application of Standard Generalized Markup Language. Whereas, XML is an application of Extensible Markup Language.
  • The first one is a static Web Page whereas the later one is a dynamic Web Page.
  • HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
  • HTML is about displaying information whereas XHTML is about describing the information.
How many types of CSS can be included in HTML?

There are three ways to include the CSS with HTML:

  • Inline CSS: It is used for styling small contexts. To use inline styles add the style attribute in the relevant tag.
  • External Style Sheet: This is used when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
  • Internal Style Sheet: It is used when a single document has a unique style. Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag in the following way:
What are logical and physical tags in HTML?

Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclose the text in the strong tag, it tells the browser that enclosed text is more important than other texts.

Physical tags are used to tell the browser how to display the text enclosed in the physical tag. Some of the examples of physical tags are <b>, <big>, <i>.

How can you apply JavaScript to a web page?

In order to make your webpage more interactive, you need JavaScript. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three main ways of including JavaScript:

Inline

Certain HTML elements allow you to execute a piece of JavaScript when a certain event occurs. For example, a button allows you to run a script when you click on it. These events are accessed through attributes and differ based on the events that are available on each element. Here is an example that shows an alert with a message when the user clicks on it:

Script block

You can define a script block anywhere on the page, which will get executed as soon as the browser reaches that part of the document. This can be inside the <head> or <body> section of your document.

Link to a JavaScript file

It allows you to keep the content of the page separate to how users interact with that content. Also, it allows you to load the same script on multiple pages. As with the script block, you can load a JavaScript file from the <head> or <body>.

What Is the difference between HTML and HTML5?  

HTML has seen many updates over time, and currently, the newest HTML version is HTML5. HTML5 is of course still primarily a markup language, but it has added a plethora of features to the original HTML and has eradicated some of the strictness that was present in XHTML. The main difference between HTML and HTML5 can be that neither audio nor video is a constituent of HTML whereas both can be considered integral parts of HTML5.  

 

What are some advantages of HTML5?  

Some advantages of HTML5 are:

  • It provides both Audio and Video support.
  • It provides geolocation support.
  • HTML5 is the most mobile-ready tool for developing mobile sites and apps.
  • It usually requires less maintenance support.
  • It provides more reliable storage options functionality.
  • It allows developers to use fancier forms.

 

 

Name some new features of HTML5

HTML5 introduces several new elements and attributes that help in building a modern website. The following are great features introduced in HTML5:

  • New Semantic Elements − These include <header>, <footer>, and <section>.
  • Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for the <input> tag.
  • Persistent Local Storage − To archive without resorting to third-party plugins.
  • WebSocket − A next-generation bidirectional communication technology for web applications.
  • Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
  • Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.
  • Audio & Video − You can embed audio or video on your web pages without resorting to third-party plugins.
  • Geolocation − Now visitors can choose to share their physical location with your web application.
  • Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
  • Drag and drop − Drag and drop the items from one location to another location on the same webpage.

 

What is HTML5 Web Storage? 

With web storage, web applications can store data locally within the user’s browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

 

What are the advantages of HTML5 Web Storage?

It can store 5 to 10 MB of data. That is far more than what cookies have. Web storage data is never transferred with HTTP request, so it increases the performance of the application. It also provides more space than what cookies offer so increasingly complex information can be kept.

 

Name types of Web Storage are available in HTML5?

There are two types of web storage in HTML5:

  • Session Storage: It stores data of current session only. It means that the data stored in session storage clear automatically when the browser is closed.
  • Local Storage: Local storage is another type of HTML5 Web Storage. In local storage, data is not deleted automatically when the current browser window is closed.

 

What are HTML5 Graphics? 

In HTML5, there are two types of graphics: 

  • Scalable Vector Graphics (SVG) – SVG provides a big benefit, since many people are now using high-resolution devices (iPads and Monitors), SVG logos and charts can scale according to the size of the devices. The HTML tag <svg> is a container for SVG graphics. SVG is used for drawing paths, circles, boxes, texts and graphic images.
  • Canvas – A canvas is a rectangular area on a HTML page for drawing graphics on the fly via JavaScript. The default size of the canvas is 300px x 150px (width × height). The HTML tag <canvas> is a container for Canvas graphics.

 

Name two semantic tags included in HTML5? 

The <article> and <section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole. 

 

What are the advantages of SVG over other image formats such as JPEG or GIF?

Following are the main advantages of using SVG over other image formats:

  • It is possible to scale the SVG images.
  • They can be created and edited with any text editor.
  • The print quality of these images is high at any resolution.
  • It is possible to zoom the SVG images without any degradation in the quality.
  • SVG images can be searched, indexed, scripted, and compressed.

 

Which browsers support HTML5? 

The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all support most of the HTML5 features. 

 

Is HTML5 backward compatible with old browsers? 

Yes! HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers. It detects support for individual HTML5 features using just a few lines of JavaScript.

 

What is <figure> in HTML5? 

This tag represents a piece of self-contained flow content. It is mostly used as a single unit to reference the main flow of the document.

 

What are the new media elements in HTML5?

Below are the Media Elements that have been added to HTML5:

  • <audio>: For multimedia content, sounds, music or other audio streams.
  • <video>: For video content, such as a movie clip or other video streams.
  • <source>: For media resources, defined inside video or audio elements.
  • <embed>: For embedded content, such as a plug-in.
  • <track>: For text tracks used in media players.

 

What are the new Form elements made available in HTML5?

The new Form elements made available in HTML5 all provide more functionalities. The tags provided to carry out these functionalities are:

  • <datalist>: It specifies a list of options for input controls. These options are pre-defined.
  • <keygen>: This tag defines a key-pair generator field.
  • <output>: It defines the result of a calculation.

 

What is the audio tag in HTML 5? 

This new tag allows you to deliver audio files directly through the browser, without the need for any plug-ins. The audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, .wav, and .ogg. I have used five types of sound formats to show which formats are compatible for the browsers. A .wav file is a common sound format that is supported by most browser versions. The syntax is <audio src="URL" controls>...</audio>

 

What are the rules established for HTML5?

Some rules established for HTML5 include:

  • Reducing the need for external JavaScript plugins (like Flash)
  • Better error handling
  • More markup as opposed to more scripting

 

What are the different types of web workers?

Types of web workers include Dedicated workers and Shared workers.

 

What is the difference between a dedicated worker and a shared worker?

Dedicated web worker: A dedicated worker is accessible from the parent script that created it. It is simply tied to its main connection. It has wide browser support.

Shared worker: A shared worker can be accessed from any script of the same origin. It can work with multiple connections but has limited browser support: Chrome 4.0+, Safari 5.0+ and Opera 10.6+.

 

How do web workers work?

Web Workers work in the following three steps: First it should be executed on separate threads. Second it should be hosted in separate files from the main page. Finally, a Worker object needs to be instantiated to call them.

 

What is the application cache in HTML5?

The Application Cache concept means that a web application is cached. It can be accessible without the need for internet connection.

 

Why Application Cache is used?

Some advantages of Application Cache:

  • ​Offline browsing – Web users can also use the application when they are offline.
  • ​Speed – Cached resources load quicker.
  • ​Reduce the server load – The web browser will only download updated resources from the server.

 

Can HTML5 get the geographical position of a user?

Yes, HTML5 can get the location of a user with the use of the Geolocation API. Use getCurrentPosition() method to get the user’s current position.

 

What is a hyperlink?

A hyperlink is a text/image on a webpage, which when clicked redirects to a new web page.

 

What are the drawbacks of cookies?

Cookies have the following drawbacks:

  • Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
  • Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
  • Cookies are limited to about 4 KB of data. Not enough to store required data.

 

What are web sockets?

Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers. Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method and receive data from server to browser by an on-message event handler.

 

What is the use of the fieldset tag in HTML5?

The <fieldset> tag groups related form elements. It is like a box. In other words, it draws a box around related element. It must start with a <legend> tag because the <legend> tag defines the title of the field set. By using the <fieldset> tag and the <legend> tag, you can make your form much easier to understand for the users.

 

Describe the Progress Bar in HTML 5?

Sometimes a task is running within a program that might take a while to complete. A user-friendly program provides some information to the user that the task is happening. It also tells how long the task might take and how much the task has been done or completed. One of the best ways to show all these activities is with the Progress Bar control. In a simple way, the progress bar indicates the progress of a specific task. In HTML5, there is the element “progress” that displays the progress of a task. The Syntax is <progress>...</progress>.

 

What Is The <!DOCTYPE>? Is it necessary to use it in Html5?

The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag does not have an end tag and It is not case sensitive. The <!DOCTYPE> declaration must be the very first thing in a HTML5 document, before the <html> tag. As In HTML 4.01, all <!DOCTYPE> declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). HTML5, however, is not based on SGML, it therefore does not require a reference to a Document Type Definition (DTD).

 

What are the different kinds of Doctypes available?

The three kinds of Doctypes available are: Strict Doctype, Transitional Doctype, and Frameset Doctype.

 

What is the browser cache?

Caching is the concept of intelligently storing commonly-used data in quick-to-access locations so that requesting that data will happen as fast as possible. The browser cache is a small database of files that contains downloaded web page resources, such as images, videos, CSS, JavaScript, and so on.

 

How does the browser know what to cache? 

As defined in the HTTP spec, each request and response can have headers associated with it, and it’s through these headers that the server can tell the client what to cache and for how long. There are two modern HTTP response headers that define how a resource should be cached: Cache-Control and ETag.

 

What is a span tag?

The HTML <span> tag is used for grouping and applying styles to inline elements. It is mostly used for styling by using an id or a class.

 

What is the difference between a span tag and a div tag? 

The difference between a span tag and a div is that a span tag is an in-line tag and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div, division, tag is a block-level tag. This is equivalent to having a line-break before and after the tag. It is useful for grouping larger chunks of code.

 

Does span need a closing tag?

Span tag is a paired tag. This means that it has both an open (<) and a closing (>) tag and it is mandatory to close this tag.

 

What is a meta tag?

A meta tag is a tag in HTML that describes some aspect of the contents of a webpage. The information that you provide in a meta tag is used by search engines to index a page so that someone searching for the kind of information the page contains will be able to find it. The meta tag is placed near the top of the HTML in a webpage as part of its head element.

 

What is the function of a meta tag? 

meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

 

What is the meter tag?

The <meter> tag defines a scalar measurement within a known range or a fractional value. This is also known as a gauge.

 

What is the difference between the progress and meter tags?

The progress tag is used to represent the progress of the task while the meter tag is used to measure data within a given range.

 

What is the best way to group form elements?

The <fieldset> tag can be used to group some of the form elements. When the purpose is to provide some HTML elements as a group to the user, the fieldset tag is the best one to use. It takes another tag within it, <legend>, which provides a title to the grouped elements.

 

What is the use of the article element in HTML5?

Article is a HTML5 semantic element, similar to <section> and <header>. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.

 

What is the use of the aside tag in HTML5?

The aside tag represents a section of a page that consists of content that is tangentially related to the content around the aside tag or it could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

 

What is the role of the wbr tag in HTML5?

The <wbr>, or the Word Break Opportunity tag, specifies where in a text it would be okay to add a line-break. When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> tag to add word break opportunities.

 

Can an HTML element have multiple classes?

Yes! To specify multiple classes, separate the class names with a space (e.g. <span class="left important">). This allows you to combine several CSS classes for one HTML element.

 

What is onblur and onfocus in HTML5?

The onblur event occurs when an object loses focus. The onblur event is most often used with form validation code (e.g. when the user leaves a form field). Note that the onblur event is the opposite of the onfocus event.

 

What is flexbox in HTML 5?

flexbox is not a single property but a set of properties on the parent element and their children. Basically, the parent is a container. It is most likely a div called a flex-container and the children are the elements called the flex-items.

 

What are frames in HTML5?

frames allow multiple HTML documents to be present as independent windows within a main browser. They allow you to present two or more documents at once.

 

Name different types of frames

There are two types of frames based on their layout. The first is the vertical frame and the other is the horizontal frame.

 

Describe MathML in HTML5? 

The Mathematical Markup Language, MathML, is a markup language to show mathematical and scientific content on the webpage. HTML5 allows us to use MathML elements inside a document using <math>...</math> tags. A mathematical expression must be inserted into the element <math> with a specified namespace.

 

What happens if the list-style-type property is used on a non-list element like a paragraph?

If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and it does not affect the contents of the paragraph.

 

Explain the usage of HTML5 semantic elements? 

The usage of the different HTML5 semantic elements are described below:

  • <header>: It is mainly used to store and define the starting information about a web page section.
  • <article>: It is used to define a set of information which can be logically independent and can be described with respect to the concerned webpage’s business logic.
  • <section>: It mainly consists of a set of instructions that defines the basic structure and content of the page.
  • <footer>: This is used to hold a set of information that is getting displayed at the last portion of a webpage.

 

 

What are the most commonly used List tags?

There are 3 commonly used list types in HTML5:

  • Unordered list (<ul>) — used to group a set of related items in no specific order
  • Ordered list (<ol>) — used to group a set of related items in a specific order
  • Description list (<dl>) — used to display name/value pairs such as terms and definitions

 

What is CORS in HTML5?

Cross-origin resource sharing (CORS) is a mechanism used to allow limited resources from another domain in a web browser. For example, when the user clicks on a HTML5 video player, it asks for camera permission. If the user allows permission, only then is the camera opened. Otherwise, the camera will not open for web applications.

 

How do you play a Video using HTML5?

HTML5 defines a new element to embed a video on the webpage using the <video> tag. An example would be <video width=”500″ height=”300″ controls><source src=“video1.mp4″ type=“video/mp4″></video>.

 

How do you play an Audio using HTML5?

HTML5 defines a new element to embed an audio on the webpage using the <audio> tag. An example would be <audio controls><source src=“audio.mp3″ type=“audio/mpeg”></audio>.

 

Why is the form tag used in HTML5?

The HTML <form> tag is used for creating a form for user input. A form can contain textfields, checkboxes, radio-buttons, and more. Forms are used to pass user data to a specified URL.

 

How to create a form tag in HTML5?

The <form> tag in HTML5 is used to create an user input form. There are many elements which are used within a form element. For example: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, and <label>.

 

What is the use of action in a form tag?

The action attribute is used to inform the browser what the webpage (or script) to call when the “submit” button is pressed.

 

What is Data List in HTML5? 

The <datalist> tag specifies a list of pre-defined options for an <input> tag. The <datalist> tag is used to provide an “autocomplete” feature on the <input> tags.

 

Which HTML5 tag would you use to define the footer?

The HTML5 <footer> tag specifies a footer for a document or section. A <footer> element should contain information about its containing element. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.