1. What are some of the advantages of HTML5 over its previous versions?
Some advantages of HTML5 are:-
It has Multimedia Support.
It has the capabilities to store offline data using SQL databases and application cache.
Javascript can be run in the background.
HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
Included new Semantic tags and form control tags.
2. What are Inline and block elements in HTML5?
Inline: Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line. Example:- <span>, <a>, <strong>, <img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>, <input>, <output>, <q>, etc.
Block: Block elements start on a new line and consume the full width of the page available. Example:- <div>, <p>, <header>, <footer>, <h1>…<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>, <hr>, <article>, <section>, etc.
3. What is the use of figure tag in HTML 5?
The figure tag is used to add a photo in the document on the web page. It is used to handle the group of diagrams, photos, code listing with some embedded content.
<p>The Taj Mahal is widely recognized as "the jewel of Muslim art in India and one of the universally admired masterpieces of the world's heritage."</p>
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
</figure>
4. How to put an image in HTML?
<img> tag is used to add an image in a web page.
Images are not inserted into a web page basically they are linked to web pages. The <img> tag helps to create a holding space for the referenced image.
The <img> tag is normally empty, it has attributes only, and does not have a closing tag.
<img> tag has two required parameters:
src – The path to the image
alt – An alternate text for the image
To insert a image in html you need to use img tag:
<img src="image path" alt="Italian Trulli">
<img src="demo.jpg" alt="Italian Trulli">
5. How to create a checkbox in HTML?
<input type="checkbox" id="car" name="vehicle1" value="Bike">
<label for="car1"> I have a Alto</label><br>
<input type="checkbox" id="car2" name="vehicle2" value="Car">
<label for="car2"> I have an Audi</label><br>
<input type="checkbox" id="car3" name="vehicle3" value="Boat">
<label for="car3"> I have a BMW</label><br>
6. Which HTML tag is used to display the data in the tabular form?
The HTML table tag is used to display data in tabular form (row * column). It also manages the layout of the page, e.g., header section, navigation bar, body content, footer section. Here is the list of tags used while displaying the data in the tabular form:
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines 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> It is used with <colgroup> element to specify column properties for each column.
<tbody> It 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.
7. What is an image map?
Image map facilitates you to link many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to make part of an image mapping.
8. How to insert a copyright symbol on a browser page?
You can insert a copyright symbol by using © or © in an HTML file.
9. What is new about the relationship between the <header> and <h1> tags in HTML5?
As HTML5 was all about better semantics and arrangements of the tags and elements, the <header> tag specifies the header section of the webpage. Unlike in previous version there was one <h1> element for the entire webpage, now this is the header for one section such as <article> or <section>. According to the HTML5 specification, each <header> element must at least have one <h1> tag.
10. Explain new input types provided by HTML5 for forms?
Following are the significant new data types offered by HTML5:
Date – Only select date by using type = “date”
Week – Pick a week by using type = “week”
Month – Only select month by using type = “month”
Time – Only select time by using type = “time”.
Datetime – Combination of date and time by using type = “datetime”
Datetime-local – Combination of date and time by using type = “datetime-local.” but ignoring the timezone
Color – Accepts multiple colors using type = “color”
Email – Accepts one or more email addresses using type = “email”
Number – Accepts a numerical value with additional checks like min and max using type = “number”
Search – Allows searching queries by inputting text using type = “search”
Tel – Allows different phone numbers by using type = “tel”
Placeholder – To display a short hint in the input fields before entering a value using type = “placeholder”
Range – Accepts a numerical value within a specific range using type = “range”
Url – Accepts a web address using type = “url”
11. Who invented HTML?
The inventor of HTML Tim Berners-Lee.
12. How to give space between two buttons in HTML?
<div class='myDiv'>
<button style='margin-right:16px'>Button 1</button>
<button style='margin-right:16px'>Button 2</button>
<button>Button 3</button>
</div>
13. Why do we use doctype in HTML?
Doctype is used for Document Type Declaration and also It informs the web browser about the type and version of HTML used in building the web document.
14. What is the use of an iframe tag?
An iframe is used to display a web page within a web page.
Syntax:
<iframe src="URL"></iframe>
Example:
<iframe src="demo_iframe.html" width="200px" height="200px"></iframe>
Target to a link:
<iframe src="https://www.codewindow.in" name="iframe_a"></iframe>
15. What are Web Workers?
These are added to bring parallelism and async capability. It runs in the background to do the computationally expensive tasks without yielding to make the page responsive. It is achieved by starting a separate thread for such tasks. These are not meant to perform UI operations. There are three types of web workers:
Dedicated Workers – These are workers that are utilized by a single script.
Shared Workers -These are workers that are utilized by multiple scripts running in different windows, IFrames, etc.
Service Workers – These act as proxy servers between web applications, the browser, and the network. Mostly used for push notifications and sync API
16. What is the Geolocation API in HTML5?
Geolocation API is used to share the physical location of the client with websites. This helps in serving locale-based content and a unique experience to the user, based on their location. This works with a new property of the global navigator object and most of the modern browsers support this.
var geolocation = navigator.geolocation;
17. How to include javascript code in HTML?
HTML provides a <script> tag using which we can run the javascript code and make our HTML page more dynamic.
<!DOCTYPE html>
<html>
<body>
<h1>
<span>This is a demo for </span>
<u><span id="demo"></span></u>
</h1>
<script>
document.getElementById("demo").innerHTML = "script Tag"
</script>
</body>
</html>