HTML5 Interview Questions | Page 2


Question 11:

What is "section" tag in HTML5?

Section tag in HTML5 is used to define a section in a web page. A section can be visualized as a division in a web page. Example 

Example - Suppose a home page of a website need to display different sections like header section, basic details section, services, products, user reviews, testimonials, contact detail section.

Use below code to define a new section

<section>
<!-- Put section content-->
</section>

 Below image displays different sections on https://modernpathshala.com home page

Html5 elements

Question 12:

What is "article" tag in HTML5? 

<article> tag in HTML5 is used to create a self independent content block. An article block represents a complete content block which may contain its heading, banner image and text paragraphs. 

<article> tag is used to create following

  • Blog post
  • Article 
  • News feed section
  • Comment 

Example

<article>
<h2>Post heading</h2>
<img src="" title="Post banner image"/>
  <p>               
    demo content
  </p>
</article>

article tag in html5

Question 13:

What is "aside" tag in HTML5?

<aside> element is used to create supporting content block along with the main content. Generally, most of the times <aside> block is used with <article> tag to create supportive content.

<aside> element may include following

  • Related articles for a blog post
  • Article tags and categories
  • Ads block
  • Email Subscription details etc.

Example

<aside>
 <div>
 <!--Related posts-->
</div>
  <div>               
    <!--Ad block-->
  </div>
</aside>

aside example in html5

Question 14:

What is "header" tag in HTML5?

<header> tag in HTML 5 can be used to create an introductory part in the web page. Header tag generally contains following

  • Heading tags <h1> to <h6>
  • Your organization brand name
  • Logo
  • Navigation links
  • Tagline
  • ETC.

A web page may contain multiple <header> tags.

Example

<header>
<!--Brand name -->  
  <h1>Modern Pathshala</h1>
<!--Brand image-->
  <img src="" title="brand logo" />
<!--Nav bar-->
  <nav>
  </nav>
</header>

HTML 5 header element

Question 15:

What is "footer" tag in HTML5?

 <footer> element in HTML5 is used to create footer a web page or document. Footer generally contains the following information

  • Sitemap of website
  • Legal information such as disclaimer or copyright information
  • Contact details
  • Back to top link
  • subscription details 
  • Related Articles etc.

Example

<footer id="footer">
<1-- put site map-->

<!--Copyright information-->
    <p>&copy; 2016 <a href="http://modernpathshala.com/">Modern Pathshala</a>, All rights reserved.</p>

<1-- put site map-->

</footer>

HTML 5 footer example


Question 16:

What is "nav" tag in HTML5?

<nav> tag in HTML 5 used to create navigational element. Generally, we use <nav> element for creating main navigational area. Navigational element contains different anchor links.

Example

<nav>
  <ul>               
     <li><a href=""><i class="fa fa-twitter"></i></a></li>
     <li><a href=""><i class="fa fa-facebook"></i></a></li>
     <li><a href=""><i class="fa fa-google-plus"></i></a></li>
     <li><a href=""><i class="fa fa-linkedin"></i></a></li>
  </ul>
</nav>
Question 17:

What is "dialog" tag in HTML5?

<dialog> tag in HTML5 is used to create a model popup window.

"Open" attribute defines that a dialog is in the open and interactive state.

Example

<dialog open>

Question 18:

What is "figure" tag in HTML5?

<figure> element in html5 is used to create following

  • Diagrams
  • Photos
  • Coding blocks
  • Illustrations

As per W3C specification 

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

W3C specification

Generally <figcaption> element is used with the <figure> element to provide a caption or legend for a figure.

Example

<figure>
  <img src="" alt="this is demo figure">	
  <figcaption> Description for figure</figcaption>
</figure>
this is demo figure
Description for figure
Question 19:

What is SVG?

SVG i.e Support Vector Graphics which defines two-dimensional vector-based graphics for the web in XML format.

The MIME type of SVG can be:- image/svg-xml, image/svg+xml, image/vnd.adobe.svg+xml 

Example: Sample Code snippet to draw a circle using SVG is given below:

<svg width="100" height="100">
     <circle  cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red" />
</svg>
Question 20:

Can you make an image draggable in HTML5? How?

Yes, if you are using HTML5 you can make an image draggable using draggable="true" attribute in <img> tag as shown:

<img src="http://modernpathshala.com/Images/bootstrap/Question/4084674120151212011257bootstrap-sample.JPG" draggable="true"/>
Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media