HTML Interview Questions

1. What are the HTML media elements?

HTML media elements are used to present the audio and video.

Some of the HTML media elements are:

HTML audio element:

The HTML

audio

element represents a sound or audio stream. It is used to play an audio file on an HTML document.

Example:

1
2
3
4
5
<audio>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

HTML

The HTML

source

element specifies multiple alternative media resources for HTML

img

elements or for media elements (

audio

video

, etc.).

It is commonly used to give the same media content in multiple file formats for providing compatibility across different browsers.

The HTML

src

attribute of the

source

element specifies the URL/path of the media resource.

Note

The content in the HTML

audio

element will only be displayed in the browsers that don't support the audio.

HTML video element:

The HTML

video

element represents a video. It is used to play audio files with captions, videos or movies.

Example:

1
2
3
<video>
  <source src="movie.mp4" type="video/mp4" />
</video>

HTML

2. How to embed an HTML document into another HTML document?

We can embed another HTML document within the current HTML document using the HTML

iframe

element.

Example:

1
<iframe src="https://learning.ccbp.in"></iframe>

HTML

The HTML

src

attribute specifies the URL/path of the HTML document to embed.

3. How to insert a video into the HTML document?

We can insert a video to the HTML document using:

HTML video element

1
2
3
<video>
  <source src="movie.mp4" type="video/mp4" />
</video>

HTML

The HTML

source

element defines the media resource for the HTML

video

element.

The HTML
src
attribute specifies the URL/path of the media resource (e.g. video).
The HTML
type
attribute specifies the type/format of the media resource(e.g. video/mp4)

HTML iframe element

1
<iframe src="https://www.youtube.com/embed/y881t8ilMyc"></iframe>

HTML

The HTML

src

attribute specifies the URL/path of the video.

To have the embed link of the YouTube video, follow these simple steps:

Open the video on YouTube and click the share button.
Open the Embed code.
Copy the value of the
src
attribute and paste it into the value of the HTML
src
attribute of our HTML
iframe
element.

Note

We used Boostrap Utility Embed to insert a video in Tourism Website. It also internally uses the HTML

iframe

element.

4. How to set controls in HTML video element?

The HTML

controls

attribute is used to set controls in HTML

video

element. It is a boolean attribute. When this attribute is present, it specifies that video controls should be displayed.

Video controls include:

Play
Pause
Seeking
Volume
Fullscreen toggle
Captions/Subtitles (when available)
Track (when available)

Example:

1
2
3
<video controls>
  <source src="movie.mp4" type="video/mp4" />
</video>

HTML

5. What is the use of an HTML iframe element?

Some of the uses of HTML

iframe

element are:

We can embed HTML documents within the current HTML document
We can embed videos within the current HTML document, etc.

6. What is an HTML picture element?

The HTML

picture

element is a container to provide multiple alternative sources for the HTML

img

element. It is useful in different display/device scenarios.

It can contain zero or more

source

elements and one HTML

img

element.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<picture>
  <source
    media="(min-width:650px)"
    srcset="
      https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/goldentemple1-img.png
    "
  />
  
  <source
    media="(min-width:465px)"
    srcset="
      https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/mysore-palace1-img.png
    "
  />
  
  <img
    src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/varanasi1-img.png"
    alt="historical places"
  />
  
</picture>
 

HTML

Collapse

The HTML
srcset
attribute specifies the alternative source/ path of the
img
element.
The HTML
media
attribute specifies the media query. CSS properties will be applied based on the device type and media features like
min-width
, etc.

7. What are HTML Semantic Elements?

The word semantic means relating to meaning in language.

So, the HTML semantic elements describe the meaning of content in between the start and end tags.

There are around a hundred semantic elements. Some of them are:

Header element

The HTML

header

element defines the container of introductory information or navigation links of an HTML document.

Generally, it contains heading elements, search form, logos, etc.

Example:

1
2
3
<header>
  <h1>HTML Semantic Elements</h1>
</header>

HTML

Nav element

The HTML

nav

element defines the section of navigation links.

Example:

1
2
3
4
5
6
7
<nav>
  <ol>
    <li><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#contacts">Contacts</a></li>
  </ol>
</nav>

HTML

Main element

The HTML

main

element defines the main content of an HTML document.

Note

There shouldn't be more than one HTML

main

element without HTML

hidden

attribute in the HTML document.

Example:

1
2
3
4
5
6
<header>HTML</header>
<main>
  <p>HTML Stands for HyperText Markup Language.</p>
  <p>It describes the structure of a Web page and consists of HTML elements that tell the browser how to display the content.</p>
</main>
 

HTML

Article element

The HTML

article

element defines the complete part of an HTML document which is independent and reusable.

It can be used to represent a magazine, newspaper article, blog entry or any other independent item of content.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<article>
  <h1>HTML</h1>
  <p>HTML Stands for HyperText Markup Language. It describes the structure of a Web page.<p>
</article>
<article>
  <h1>CSS</h1>
  <p>CSS Stands for Cascading Style Sheets. It describes the styles for the HTML documents, including design, layout, etc. </p>
</article>
<article>
  <h1>JavaScript</h1>
  <p>JavaScript is a programming language used both on the client-side and server-side that allows you to make web pages interactive.</p>
</article>
 

HTML

Collapse

Section element

The HTML

section

element defines the generic section of an HTML document.

It is generally used to group content that has a heading.

Note

The HTML

section

and HTML

article

elements are conceptually similar and interchangeable. But the HTML

section

element differs from

article

element because it isn’t necessarily self-contained (complete).

Example:

1
2
3
4
5
6
7
8
<section>
  <h1>Uses of HTML</h1>
  <ul>
    <li>Structuring web pages</li>
    <li>Creating Hyperlinks</li>
    <li>Embedding images and videos</li>
  </ul>
</section>

HTML

Aside element

The HTML

aside

element defines the portion of an HTML document whose content is only indirectly related to the HTML document's main content.

It specifies the content of less importance.

It is generally used to represent sidebars or call-out boxes.

Example:

1
2
3
4
5
6
7
8
9
<article>
  <h1>HTML</h1>
  <p>HTML Stands for HyperText Markup Language. It describes the structure of a Web page.<p>
</article>
<aside>
  <h1>Website</h1>
  <p>Website is a collection of webpages.</p>
</aside>
 

HTML

Footer element

The HTML

footer

element defines the footer of a page or section.

It generally contains information about the author of the section, copyright data, or links to related documents.

Example:

1
2
3
<footer>
  <p>Email me at rahul@gmail.com</p>
</footer>

HTML

8. What are the uses of Semantic HTML?

Some of the uses of Semantic HTML are:

Accessibility: It makes web pages accessible for mobile devices and people with disabilities as well. This is because screen readers and browsers can understand the code better.

Search Engine Optimization: It improves the website Search Engine Optimization Rankings which increases the number of people that visit our webpage.

Easy to Understand: It makes our code more readable and easier to understand.

9. What are HTML non-semantic elements?

The HTML non-semantic elements don't have any meaning.

Examples:

div

and

span

We cannot exactly find out the type of content within the given element unlike semantic elements like

, etc.

10. What are the differences between HTML semantic and non-semantic elements?

semantic	non-semantic
semantic elements have the meaning	non-semantic elements don't have the meaning
They describe the content they contain	They can contain anything

11. What are Global attributes?

Global attributes are attributes common to all HTML elements.

They can be used on all elements, though they may not affect some elements.

Examples:

class

title

, etc.

12. What are HTML selected and multiple attributes?

Selected Attribute:

It is a boolean attribute. It specifies that an option should be pre-selected when the page loads.

Example:

1
<option value="Active" selected>Active</option>

HTML

Multiple Attribute:

It is a boolean attribute. It specifies whether the user is allowed to provide more than one value in an input field.

It can be used in the HTML

select

element.

Example:

1
2
3
4
5
6
7
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

HTML

Note

Multiple options can be selected by holding down the control(ctrl)/command button

13. What is an HTML required attribute

The HTML

required

attribute is a boolean attribute.

If present, it specifies that an input field must be filled out before submitting the form.

Example:

1
2
3
4
5
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />
  <input type="submit" />
</form>

HTML

14. What is an HTML html element?

The HTML

html

element defines the root of an HTML document.

It is a container for all the other HTML elements.

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Tourism</h1>
    <p>Plan your trip wherever you want to go</p>
  </body>
</html>

HTML

15. What are the HTML formatting elements?

The HTML formatting elements are used to format the text.

Some of them are:

Element	Description
b	It is used to bold the text
strong	It bolds the text and is used to tell the browser that the text is important
i	It is used to make the text italic
em	It makes the text italic and is used to tell the browser that the text has to be emphasized
mark	It is used to mark or highlight a text for special interest or reference purposes
small	It is used to display the smaller text especially for copyrights and side-comments
del	It is used to display the deleted content
ins	It is used to display the additional content
sub	It is used to subscript a text
sup	It is used to superscript a text

16. What are HTML entities?

HTML entities are strings that start with an ampersand (

) and ends with a semicolon (

;

These are used to display the reserved characters (characters that are part of the HTML code.

in tags) and invisible characters (non-breaking spaces, etc.).

Character	Entity	Note
&	&	Treated as the beginning of an entity.
<	<	Treated as the beginning of a tag
>	>	Treated as the ending of a tag
"	"	Treated as the beginning and end of an attribute's value
non-breaking space		Space that will not break into a new line

Example:

1
<p>&lt; and &gt; are comparison operators</p>

HTML

17. What is an HTML style element?

The HTML

style

element contains style information for an HTML document, or part of an HTML document. It contains CSS, which is applied to the contents of the HTML document.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
      }
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Tourism</h1>
    <p>Plan your trip</p>
  </body>
</html>

HTML

Collapse

The HTML

style

element must be placed inside the HTML

head

element.

18. Explain HTML meter element?

The HTML

meter

element defines a scalar measurement within a known range or a fractional value. To use the HTML

meter

element, we need to know the maximum value.

Some of the attributes of the HTML

meter

element are:

high
low
max
min
optimum
value
, etc.

Example:

1
<meter value="0.6">60%</meter>

HTML

19. What is an HTML del element?

The HTML

del

element represents the text that has been deleted from an HTML document.

Example:

1
<del>thinking</del>

HTML

20. What HTML element defines the title of a work?

The HTML

cite

element defines the title of a poem, book, song, movie, etc.

Example:

1
<p>My favorite book is <cite>Atomic Habits</cite> by James Clear</p>

HTML

21. What HTML element underlines the text?

The HTML

element underlines the text.

It is generally used to identify the misspelt terms.

Example:

1
<p>The <u>see</u> is full of fish.</p>

HTML

22. What is an HTML details element?

The HTML

details

element defines a disclosure widget where we can see the additional information.

It has two states:

open: We can see the additional information.
close: We can't see the additional information. We can see only the summary.

Example:

1
2
3
4
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

HTML

The

summary

element defines the label or summary.

23. How to create a range in HTML?

The HTML

input

element with the type

range

is used to create a range in HTML.

It lets the user provide a number within the given range in the form of a slider.

Example:

1
2
<input type="range" id="volume" name="volume" min="0" max="11" />
<label for="volume">Volume</label>

HTML

The HTML
min
attribute specifies the minimum value allowed
The HTML
max
attribute specifies the maximum value allowed

24. Why HTML 5 is best compared to old versions?

HTML 5 is the latest version of HTML.

Some of the new features added in HTML5 that make it better than HTML are:

audio
and
video
elements
semantic elements like
header
,
footer
,
figure
,
figcaption
,
nav
, etc.
placeholder
attribute
progress
element, etc.

25. What are the different doctypes in HTML?

Some of the doctype declarations for different versions of HTML are:

HTML5:

1
<!DOCTYPE html>

HTML

HTML4.01: (Strict doctype - Doesn't allow deprecated and presentation elements like

font

, etc.)

1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML

HTML4.01: (Transitional doctype - Allows deprecated and presentation elements like

font

, etc.)

1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML

HTML Interview Questions

1. What are the HTML media elements?

2. How to embed an HTML document into another HTML document?

3. How to insert a video into the HTML document?

4. How to set controls in HTML video element?

5. What is the use of an HTML iframe element?

6. What is an HTML picture element?

7. What are HTML Semantic Elements?

8. What are the uses of Semantic HTML?

9. What are HTML non-semantic elements?

10. What are the differences between HTML semantic and non-semantic elements?

11. What are Global attributes?

12. What are HTML selected and multiple attributes?

13. What is an HTML required attribute

14. What is an HTML html element?

15. What are the HTML formatting elements?

16. What are HTML entities?

17. What is an HTML style element?

18. Explain HTML meter element?

19. What is an HTML del element?

20. What HTML element defines the title of a work?

21. What HTML element underlines the text?

22. What is an HTML details element?

23. How to create a range in HTML?

24. Why HTML 5 is best compared to old versions?

25. What are the different doctypes in HTML?

Post a Comment

Coding Key

Interview Preparation

Subscribe Us

Contact Form