Top HTML and HTML5 – This text covers essentially the most steadily requested HTML and HTML5 questions requested in interviews.
Top HTML and HTML5 interview questions · 1. Are the HTML tags and elements the same thing? · 2. What are tags and attributes in HTML?- Earlier than beginning with the interview questions on HTML Language, let’s first undergo HTML, what’s HTML, the profession alternatives it offers, and so on.
HTML stands for HyperText Markup language. It’s a commonplace textual content formatting language used for creating internet pages launched in 1993. HTML is a language that’s interpreted by the browser and it tells the browser what to show and the right way to show.
HTML is an necessary language to be taught if anybody desires to work within the internet improvement area [Web designers, Web Developers]. HTML alone will not be enough for a internet developer as a result of HTML solely defines the construction of the information that will probably be rendered on the browser in a webpage, to make it visually interesting and to make it purposeful, we might want to use CSS and Javascript respectively.
No. HTML parts are outlined by a beginning tag, could include some content material and a closing tag.For instance, <h1>Heading 1</h1> is a HTML aspect however simply <h1> is a beginning tag and </h1> is a closing tag.
Tags are the first element of the HTML that defines how the content material will probably be structured/ formatted, whereas Attributes are used together with the HTML tags to outline the traits of the aspect. For instance, <p align=” heart”>Interview questions</p>, on this the ‘align’ is the attribute utilizing which we are going to align the paragraph to point out within the heart of the view.
HTML parts which wouldn’t have closing tags or don’t must be closed are Void parts. For Instance <br />, <img />, <hr />, and so on.
In HTML, a clean sequence of whitespace characters is handled as a single area character, As a result of the browser collapses a number of areas right into a single area character and this helps a developer to indent strains of textual content with out worrying about a number of areas and keep readability and understandability of HTML codes.
In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, and so on. To make use of these characters in our webpage we have to use the character entities known as HTML Entities. Under are a couple of mapping between the reserved character and its respective entity character for use.
| Character | Entity Title | Entity Quantity |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| (non-breaking area) Eg. 10 PM | Eg. <p>10  PM</p> |   |
The category attribute is used to specify the category title for an HTML aspect. A number of parts in HTML can have the identical class worth. Additionally, it’s primarily used to affiliate the types written within the stylesheet with the HTML parts.
A number of parts in HTML can have the identical class worth, whereas a price of id attribute of 1 aspect can’t be related to one other HTML aspect.
Multipart type knowledge is likely one of the values of the enctype attribute. It’s used to ship the file knowledge to the server-side for processing. The opposite legitimate values of the enctype attribute are textual content/plain and software/x-www-form-urlencoded.
Each internet web page has completely different parts to show the meant content material and a selected UI. However nonetheless, there are few issues that are templated and are globally accepted option to construction the net web page, corresponding to:
To optimize web site load time we have to optimize its asset loading and for that:
HTML has numerous formatting tags:
The three sorts of Doctypes which can be found:
The character set is outlined in <meta> tag inside <head> aspect.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ... ... </head> ... </html>
The impact on a traditional webpage of the tags <sturdy>, <b> and <em>, <i> is similar. <b> and <i> tags stands for daring and italic. These two tags solely apply font styling and daring tag <b>, simply provides extra ink to the textual content, these tags do not say something concerning the textual content.
Whereas, <sturdy> and <em> tags symbolize that the span of textual content is of sturdy significance or extra significance and emphatic stress respectively than the remainder of the textual content. These tags have semantic which means.
<head> tag offers the details about the doc. It ought to at all times be enclosed within the <html> tag. This tag incorporates the metadata concerning the webpage and the tags that are enclosed by head tag like <hyperlink>, <meta>, <fashion>, <script>, and so on. aren’t displayed on the internet web page. Additionally, there might be just one <head> tag in all the Html doc and can at all times be earlier than the <physique> tag.
<physique> tag defines the physique of the HTML doc. It ought to at all times be enclosed within the <html> tag. All of the contents which must be displayed on the internet web page like photos, textual content, audio, video, contents, utilizing parts like <p>, <img>, <audio>, <heading>, <video>, <div>, and so on. will at all times be enclosed by the <physique> tag. Additionally, there might be just one physique aspect in an HTML doc and can at all times be after the <head> tag.
Sure, we will show an online web page inside one other HTML internet web page. HTML offers a tag <iframe> utilizing which we will obtain this performance.
<iframe src=”url of the net web page to embed” />Cell Spacing is the area or hole between two consecutive cells. Whereas, Cell Padding is the area or hole between the textual content/ content material of the cell and the sting/ border of the cell. Please consult with the above determine instance to seek out the distinction.
HTML offers two desk attributes “rowspan” and “colspan” to make a cell span to a number of rows and columns respectively.
Sure, it’s attainable utilizing the “show” property with its worth as “block”, to alter the inline aspect right into a block-level aspect.
There are primarily 7 values of place attribute that can be utilized to place an HTML aspect:
Under are a number of the show varieties that are hardly ever used:
After we use the attribute “visibility: hidden” for an HTML aspect then that aspect will probably be hidden from the webpage however nonetheless takes up area. Whereas, if we use the “show: none” attribute for an HTML aspect then the aspect will probably be hidden, and likewise it received’t take up any area on the webpage.
HTML offers a hyperlink – <a> tag to specify the hyperlinks in a webpage. The ‘href’ attribute is used to specify the hyperlink and the ‘goal’ attribute is used to specify, the place can we wish to open the linked doc. The ‘goal’ attribute can have the next values:
There are 3 ways during which we will specify the types for HTML parts:
The anchor tag <a> is used to create a hyperlink to a different webpage or to a sure a part of the webpage and these hyperlinks are clickable, whereas, hyperlink tag <hyperlink> defines a hyperlink between a doc and an exterior useful resource and these aren’t clickable.
HTML offers a <script> tag utilizing which we will run the javascript code and make our HTML web page extra dynamic.
<!DOCTYPE html>
<html>
<physique>
<h1>
<span>This can be a demo for </span>
<u><span id="demo"></span></u>
</h1>
<script>
doc.getElementById("demo").innerHTML = "script Tag"
</script>
</physique>
</html>If the scripts include some event-triggered capabilities or jquery library then we must always use them within the head part. If the script writes the content material on the web page or will not be inside a operate then it must be positioned contained in the physique part on the backside. Briefly, observe under three factors:
The HTML type is used to gather the consumer inputs. HTML offers a <type> tag to create kinds. To take enter from the consumer we use the <enter> tag inside the shape so that every one collected consumer knowledge might be despatched to the server for processing. There are completely different enter varieties like ‘button’, ‘checkbox’, ‘quantity’, ‘textual content’, ‘password’, ‘submit’ and so on.
<type motion="/submit_data.php"> <label>Enter your title: </label> <enter kind="textual content" title="title" /> <label>Enter Cellular quantity </label> <enter kind="quantity" title="mobile_no"/> <enter kind="submit" worth="Submit"> </type>
HTML permits occasion set off actions in browsers utilizing javascript or JQuery. There are quite a lot of occasions like ‘onclick’, ‘ondrag’, ‘onchange’, and so on.
<!DOCTYPE html>
<html>
<physique fashion="padding-top:50px">
<h3 id="event_demo">0</h3>
<enter kind="button" onclick="myFunction()" worth="Click on Me" />
<enter kind="reset" onclick="reset()" worth="Reset" />
</physique>
<script>
operate myFunction()
var worth = doc.getElementById("event_demo").innerHTML
worth = parseInt(worth) + 1;
doc.getElementById("event_demo").innerHTML = worth;
operate reset()
</script>
</html>Some benefits of HTML5 are:-
HTML5 offers two tags: <audio> and <video> tags utilizing which we will add the audio or video instantly within the webpage.
| Inline | Block |
|---|---|
| Inline parts simply take up the area that’s completely crucial for the content material and doesn’t begin from a brand new line. Instance:- <span>, <a>, <sturdy>, <img>, <button>, <em>, <choose>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>, <enter>, <output>, <q>, and so on. | Block parts begin on a brand new line and eat the total width of the web page obtainable. Instance:- <div>, <p>, <header>, <footer>, <h1>…<h6>, <type>, <desk>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <determine>, <hr>, <article>, <part>, and so on. |
The <determine> tag specifies the self-contained content material, like diagrams, photos, code snippets, and so on. <determine> tag is used to semantically manage the contents of a picture like picture, picture caption, and so on., whereas the <img> tag is used to embed the image within the HTML5 doc.
To specify we will use <meta> tag which is a void tag,i.e., it doesn’t have a closing tag. A number of the attributes used with meta tags are title, content material, http-equiv, and so on. The under picture tells the right way to specify the metadata.
No. The <datalist> tag and <choose> tag are completely different. Within the case of <choose> tag a consumer should select from a listing of choices, whereas <datalist> when used together with the <enter> tag offers a suggestion that the consumer selects one of many choices given or can enter some solely completely different worth.
Picture Map lets a developer map/hyperlink completely different elements of photos with the completely different internet pages. It may be achieved by the <map> tag in HTML5, utilizing which we will hyperlink photos with clickable areas.
<img src=”image_url” , usemap=”#workspace” />
<map title=”workspace”>
<space form=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” />
<space form=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” />
</map>Semantic parts are these which describe the actual which means to the browser and the developer. Components like <type>, <desk>, <article>, <determine>, and so on., are semantic parts.
S.no., Language, Principally used for
1, HTML, FrontEnd
2, CSS, FrontEnd
3, Python, BackEnd
<progress> tag must be used after we wish to present the completion progress of a process, whereas if we simply need a scalar measurement inside a recognized vary or fraction worth. Additionally, we will specify a number of further attributes for <meter> tags like ‘type’, ‘low’, ‘excessive’, ‘min’, and so on.
Sure, in HTML5 we will drag and drop a component. This may be achieved utilizing the drag and drop-related occasions for use with the aspect which we wish to drag and drop.
| SVG | Canvas |
|---|---|
| SVG is a vector primarily based i.e., composed of shapes. | It’s Raster primarily based i.e., composed of pixels. |
| SVG works higher with a bigger floor. | Canvas works higher with a smaller floor. |
| SVG might be modified utilizing CSS and scripts. | Canvas can solely be modified utilizing scripts. |
| SVG is very scalable. So we will print at top quality with excessive decision. | It’s much less scalable. |
HTML5 helps the next three varieties of audio file codecs:
These had been the goal space of the HTML5 specs:
This internet storage helps in storing a number of the static knowledge within the native storage of the browser in order that we don’t must fetch it from the server each time we’d like it. There’s a dimension restrict primarily based on completely different browsers. This helps in reducing the load time and a easy consumer expertise. There are two varieties of internet storage which can be used to retailer knowledge regionally in HTML5:
It’s used to assist extract knowledge for web site crawlers and serps. It’s principally a gaggle of name-value pairs. The teams are known as gadgets, and every name-value pair is a property. Most of the various search engines like Google, Microsoft, Yandex, and so on observe schema.org vocabulary to extract this microdata.
<div itemscope itemtype="http://schema.org/SoftwareApplication"> <span itemprop="title">Interviewbit Video games</span> - REQUIRES <span itemprop="operatingSystem">ANDROID</span><br> <hyperlink itemprop="applicationCategory" href="http://schema.org/GameApplication"/> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> RATING: <span itemprop="ratingValue">4.6</span> ( <span itemprop="ratingCount">8864</span> scores ) </div> <div itemprop="affords" itemscope itemtype="http://schema.org/Provide"> Worth: Rs.<span itemprop="value">1.00</span> <meta itemprop="priceCurrency" content material="INR" /> </div> </div>
The <output> tag is used for representing the results of a calculation. It has the next attributes:
<type oninput = "end result.worth=parseInt(n1.worth)+parseInt(n2.worth)">
<enter kind = "quantity" title = "n1" worth = "1" /> +
<enter kind = "quantity" title = "n2" worth = "2" /><br />
The output is: <output title = "end result"></output>
</type>The above instance appears like
As HTML5 was all about higher semantics and preparations of the tags and parts, the <header> tag specifies the header part of the webpage. In contrast to in earlier model there was one <h1> aspect for all the webpage, now that is the header for one part corresponding to <article> or <part>. Based on the HTML5 specification, every <header> aspect should no less than have one <h1> tag.
HTML5 helps two sorts of graphics:
<!DOCTYPE HTML> <html> <head> </head> <physique> <canvas width="300" top="100" fashion="border:2px strong;"></canvas> </physique> </html>
<!DOCTYPE html>
<html>
<physique>
<svg width="400" top="110">
<rect width="300" top="100" fashion="fill:#FFF;stroke-width:2;stroke:#000" />
</svg>
</physique>
</html>Each of the above examples produce this output and symbolize two completely different approaches supplied by HTML5 to implement graphical points within the webpage.
Following are the numerous new knowledge varieties supplied by HTML5:
<type>
<div>
<label>Date:</label>
<enter kind="date" id="date" />
<br>
<label>Week:</label>
<enter kind="week" id="week" />
<br>
<label>Month:</label>
<enter kind="month" id="month" />
<br>
<label>Time:</label>
<enter kind="time" id="time" />
<br>
<label>Datetime:</label>
<enter kind="datetime" id="datetime" />
<br>
<label>Datetime Native:</label>
<enter kind="datetime-local" id="datetime-local" />
<br>
<label>Coloration:</label>
<enter kind="shade" id="shade"/>
<br>
<label>E mail:</label>
<enter kind="e mail" id="e mail" placeholder="e mail tackle" />
<br>
<label>Quantity:</label>
<enter kind="quantity" id="quantity" />
<br>
<label>Search:</label>
<enter kind="search" id="search" />
<br>
<label>Cellphone:</label>
<enter kind="tel" id="telephone" placeholder="Cellphone Quantity" sample="\d{10}$" />
<br>
<label>Vary:</label>
<enter kind="vary" id="vary" />
<br>
<label>URL:</label>
<enter kind="url" id="url"/>
</div>
</type>
<label>
Video:
</label>
<video width="320" top="240" controls>
<supply src="video.mp4" kind="video/mp4">
<monitor src="subtitles.vtt" sort="subtitles" srclang="en" label="English">
</video>
<br>
<label>
Embed:
</label>
<embed kind="video/webm" src="https://www.youtube.com/embed/MpoE6s2psCw" width="400" top="300">
<br>
<label>
Audio:
</label>
<audio controls>
<supply src="audio.mp3" kind="audio/mpeg">
</audio>