Scribd
Upload
8 views4 pages

Medium 1

The document provides an overview of various HTML5 features, including semantic HTML, new form elements, web storage methods, and multimedia embedding techniques. It explains the purpose of specific tags like <header>, <footer>, <video>, <audio>, and <nav>, as well as attributes such as data-* and contenteditable. Additionally, it covers advanced topics like custom elements, shadow DOM, ARIA for accessibility, and the use of microdata.

Uploaded by

Anu Mess
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views4 pages

Medium 1

The document provides an overview of various HTML5 features, including semantic HTML, new form elements, web storage methods, and multimedia embedding techniques. It explains the purpose of specific tags like <header>, <footer>, <video>, <audio>, and <nav>, as well as attributes such as data-* and contenteditable. Additionally, it covers advanced topics like custom elements, shadow DOM, ARIA for accessibility, and the use of microdata.

Uploaded by

Anu Mess
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

1. What is semantic HTML?

o Semantic HTML refers to using HTML tags that convey the meaning of the content,
such as <header>, <footer>, <article>, and <section>.
2. What are the new form elements introduced in HTML5?
o New form elements include <input type="email">, <input type="url">, <input
type="number">, <input type="date">, <input type="range">, <input type="color">,
<datalist>, <output>, and <progress>.
3. What are HTML5 web storage methods?
o HTML5 provides two web storage methods: localStorage and sessionStorage.
4. What is the difference between localStorage and sessionStorage?
o localStorage stores data with no expiration time, whereas sessionStorage stores
data for the duration of the page session.
5. How do you embed a video in an HTML page?
o Use the <video> tag with the src attribute or <source> elements.

<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

6. How do you embed audio in an HTML page?


o Use the <audio> tag with the src attribute or <source> elements.

<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>

7. What is the purpose of the <figure> and <figcaption> tags in HTML5?


o The <figure> tag is used to group media content with its caption, and the
<figcaption> tag provides the caption.
8. What is the data-* attribute used for?
o The data-* attribute is used to store custom data private to the page or application.
9. How do you create a responsive image in HTML?
o Use the srcset attribute in the <img> tag to provide different images for different
screen sizes.

<img src="image.jpg" srcset="image-small.jpg 480w, image-large.jpg 800w"


sizes="(max-width: 600px) 480px, 800px" alt="Responsive image">

10. What is the purpose of the <meta> tag?


o The <meta> tag provides metadata about the HTML document, such as character
set, viewport settings, and description.
11. What is the viewport meta tag used for?
o The viewport meta tag controls the layout on mobile browsers.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

12. How do you create a modal dialog in HTML?


o Use a combination of HTML, CSS, and JavaScript to create a modal dialog. The
<dialog> element in HTML5 can also be used.
<dialog id="myModal">This is a modal</dialog>

13. What is the <template> tag used for?


o The <template> tag is used to define HTML fragments that can be cloned and
inserted into the document using JavaScript.
14. What are custom elements in HTML?
o Custom elements are user-defined HTML tags that extend HTML's built-in features.
15. What is the shadow DOM?
o The shadow DOM is a web standard that enables encapsulation of a DOM subtree
so that it is isolated from the main document's DOM.
16. How do you create a custom element?
o Define a class that extends HTMLElement and use customElements.define() to
register it.

class MyElement extends HTMLElement {


constructor() {
super();
}
}
customElements.define('my-element', MyElement);

17. What is the difference between <section> and <div>?


o <section> is a semantic tag used to define sections of a document, while <div> is a
generic container with no semantic meaning.
18. How do you add a favicon to a website?
o Use the <link> tag in the <head> section.

<link rel="icon" href="favicon.ico" type="image/x-icon">

19. How do you use the <picture> element?


o The <picture> element provides multiple sources for an image, allowing the browser
to choose the best one.

<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-small.jpg" media="(max-width: 799px)">
<img src="image.jpg" alt="Responsive image">
</picture>

20. What is the contenteditable attribute?


o The contenteditable attribute makes an element editable by the user.

<div contenteditable="true">This is editable</div>

21. How do you create a progress bar in HTML?


o Use the <progress> element.

html
Copy code
<progress value="50" max="100"></progress>

22. What is the difference between defer and async attributes in the <script> tag?
o The defer attribute loads the script after the HTML document has been parsed, while
the async attribute loads the script asynchronously as soon as it is available.
23. How do you include an SVG in an HTML document?
o You can include an SVG using the <svg> tag or embed it using the <img> tag.

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

24. What is ARIA and why is it used?


o ARIA (Accessible Rich Internet Applications) defines ways to make web content and
applications more accessible to people with disabilities.
25. How do you use ARIA attributes?
o ARIA attributes are added to HTML elements to provide additional accessibility
information.

<button aria-label="Close" aria-hidden="true">X</button>

26. What is the <main> tag used for?


o The <main> tag is used to define the main content of the document, which is unique
and central to the document.
27. How do you create an HTML5 banner ad?
o Create a simple HTML structure and use CSS and JavaScript to control the
appearance and behavior.

<div class="banner">
<img src="ad.jpg" alt="Ad">
<button class="close">Close</button>
</div>

28. What is the purpose of the <nav> element?


o The <nav> element is used to define a block of navigation links.
29. What are microdata and how do you use them?
o Microdata is a way to nest metadata within existing content on web pages. It uses
attributes such as itemscope, itemtype, and itemprop.

<div itemscope itemtype="http://schema.org/Person">


<span itemprop="name">John Doe</span>
</div>

30. How do you make an HTML element draggable?


o Use the draggable attribute and define the drag-and-drop behavior with JavaScript.

<div draggable="true" ondragstart="drag(event)">Drag me</div>

You might also like