Disclaimer: All 30 questions are taken from tweet of @eugZolotarenko. You can find me @imknitesh. I really liked all this questions and wanted to have a single place where I can also look up for the answer for the same.
Question Tweet link: https://twitter.com/eugZolotarenko/status/1472555078246711301
1. What is HTML?
HTML is the standard markup language for creating Web pages. It stands for Hyper Text Markup Language. It describes the structure of a Web page. It tells the browser how to display the content. HTML consist of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
2. What is the purpose of using HTML?
HTML is the language for describing the structure of Web pages. HTML gives authors the means to:
- Publish online documents with headings, text, tables, lists, photos, etc.
- Retrieve online information via hypertext links, at the click of a button.
- Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
- Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
3. What are the advantages and limitations of HTML?
Advantages :
- HTML is widely used.
- Every browser supports HTML Language.
- Easy to learn and use.
- HTML is light weighted and fast to load.
- Do not get to purchase any extra software because it’s by default in every window.
- Easy to use
- Loose syntax (although, being too flexible won’t suit standards).
- HTML is easy enough to write
- HTML is that it is easy to code even for novice programmers.
- HTML also allows the utilization of templates, which makes designing a webpage easy.
- Very useful for beginners in the web designing field.
- HTML can be supported to each and every browser, if not supported to all the browsers.
- HTML is built on almost every website, if not all websites.
- HTML is increasingly used for data storage as like XML syntax.
- Free – You need not buy any software.
- HTML is present in every window by default so you not need to buy the software which cost too much.
- HTML has many tag and attributes which can short your line of code.
Disadvantages :
- It cannot produce dynamic output alone, since it’s a static language.
- Making the structure of HTML documents becomes tough to understand.
- Errors can be costly.
- It is the time consuming as the time it consume to maintain on the colour scheme of a page and to make lists, tables and forms.
- It can create only static and plain pages so if we’d like dynamic pages then HTML isn’t useful.
- Required to write a lot of code for just creating a simple webpage.
- Security features offered by HTML are limited.
- If we need to write down long code for creating a webpage then it produces some complexity.
- HTML can create only static and plain pages so if we’d like dynamic pages then HTML isn’t useful.
- Security features are not good at HTML.
4. How can we integrate JS into an HTML document?
You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code.
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.
Generally, JavaScript code can go inside of the document <head> section in order to keep them contained and out of the main content of your HTML document. However, if your script needs to run at a certain point within a page’s layout — like when using document.write to generate content — you should put it at the point where it should be called, usually within the <body> section.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<script>
let d = new Date();
alert("Today's date is " + d);
</script>
</head>
<body>
</body>
</html>
5. How can we integrate CSS into an HTML document?
You can add CSS to an HTML document in three ways
-
Inline CSS: Requires the style attribute placed inside an HTML element.
<element style="CSS property: value"> -
Internal CSS: Requires the
<style>element placed inside the head section of an HTML file. -
External CSS: Requires the
<link>element placed inside the head section of an HTML file.
6. What is a Tag in HTML?
An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document.
As part of an HTML element, HTML tags help web browsers convert HTML documents into web pages. For example, the <p> tag is used to organize text content into paragraph elements and the <img> tag is used to embed image elements.
Many tags, though not all, use an opening tag and closing tag to wrap around the content that they are used to modify. Closing tags are denoted with a backslash like this: </tag_name>. HTML tags are not visible in the browser.
7. What is the difference between HTML Elements and Tags?
Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element, as you can see in the above illustration.
However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag is an element is a tag. For simplicity's sake of this website, the terms "tag" and "element" are used to mean the same thing — as it will define something on your web page.
8. What are Attributes and how do you use them?
Attributes are used to provide additional information about a specific element on an HTML page.
Attributes are specified in the opening tag of an HTML document and are usually specified in a name/value pair. For instance, an attribute called name with the value value would appear like this: name=value.
9. What semantic elements do you know?
Listed below are few semantic elements
Header tags <h1> through <h6>
<blockquote>
<code>
<em>
<header> defines a header for the document or a section
<footer> defines a footer for the document or a section
<nav> defines navigation links in the document
<main> defines the main content of a document
<section> defines a section in the document—the spec defines this as “a thematic grouping of content, typically with a heading," so you can think of it as being like a chapter
<article> defines an article in the document
<aside> defines content aside from the page content
<address> defines the contact information for the author/owner of a document or an article
<figure> defines self-contained content, like illustrations, diagrams, photos, code blocks, etc.
There are many more semantic HTML tags to use as you build a standards-compliant website.
10. Why should we use semantic elements?
Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance. Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.
Perhaps the greatest advantage that semantic markup offers is that it allows search engines and crawlers to better understand the content they're scraping. While there is no evidence that the use of this markup directly affect page rank, it can make your results stand out more.
11. What do you know about HTML Entities?
From MDN
An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard.
For e.g., <, >, &
Official Character List
12. What HTML formatting tags do you know?
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<s> - Incorrect text
<sub> - Subscript text
<sup> - Superscript text
<h1...h6> - Header
13. When to include JS code in the head and when in the body?
<script> tags are run when the browser encounters them when loading the page. The <head> can't contain content for the page, it can only contain meta-information (titles, descriptions, etc), styles and scripts. Therefore if you place a <script> tag in the <head>, you are ensuring that it is run before the browser has started loading the content of the page (which must go in the <body>).
If you want to manipulate the content of the page, you need to make sure your script appears after the content you are manipulating. This is why put scripts at the end of the <body>.
The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.
The <script> tag inside the <head>tag usually makes the html page loading slower. This is because the html parser is loaded first and as soon as it encounters <script> it has to load the JavaScript interpreter first and then after the script is loaded it has to return back to the html parsing. This wastes some time.
Instead putting it after the <body> tag first lets the parser to load the html content first and then start loading the script. Thus here there is only one switching b/w the parser and interpreter. Thus, this approach is better.
14. What Inline elements in HTML do you know?
<a>
<img>
<span>
<button>
<img>
<input>
15. What block elements in HTML do you know?
<div>
<article>
<aside>
<footer>
<form>
<li>
<ul>
<p>
16. What is the difference between block and inline elements?
From MDN: The basic conceptual differences between inline and block-level elements:
Content model
Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.
Formatting
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).
17. What is the difference between figure tag and img tag?
The <figure>tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%" />
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
- src - Specifies the path to the image
- alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"
18. Why do we need “alt” in the img tag?
The alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
<img src="img_girl.jpg" alt="Girl in a jacket">
19. What input types do you know?
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Note: default input type is text
20. What ways of optimizing website assets loading do you know?
- Make fewer HTTP requests
- Use a Content Delivery Network
- Add an Expires header
- Gzip components
- Put CSS at the top
- Move scripts to the bottom
- Avoid CSS expressions
- Make JavaScript and CSS external
- Reduce DNS lookups
- Minify JavaScript
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
21. What is the difference between “class” and “id”?
22. What type of lists do you know?
- Ordered lists
<ol> - Unordered lists
<ul> - Description lists
<dl>
23. How to create a nested webpage in HTML?
Nested webpages cane be created using
- Using
<iframe>tag - Using
<embed>tag
24. What is an image map?
From W3School
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" />
<map name="workmap">
<area
shape="rect"
coords="34,44,270,350"
alt="Computer"
href="computer.htm"
/>
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm" />
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm" />
</map>
25. What is the use of a span tag?
From MDN The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.
26. What is the difference between HTML and XHTML?
HTML is short for Hypertext Markup Language. It is used to create websites and web applications. Let’s break it down, so we understand the name better:
Hypertext: Hypertext refers to the “text wrapped within a text.” It is very similar to hyperlinks and contains an underlying text that, when clicked, redirects to a new webpage.
Markup language: A markup language is not necessarily a programming language. Instead, it is used to apply formatting and layout to a simple text document. This leads to more interactive and dynamic text content.
What is XHTML?
- XHTML stands for Extensible Hypertext Markup Language
- XHTML is almost similar to HTML but it is stricter than HTML
- It is swift, accurate, easily maintained, convertible, and formatted
- All major browsers support XHTML
27. What are logical and physical tags in HTML?
Physical tags: Physical tags are used to indicate that how specific characters are to be formatted or indicated using HTML tags
<sup> Superscript is usually used for showing elements above base-line
<sub> The subscript is used for alternate baseline.
<i> An Italic tag is used to define a text with a special meaning.
<big> Big tag increase the font size by 1 (Note: You can not use the big tag in HTML 5)
<small> A small tag defines the small text, and it is used while writing copyright.
<b> Bold increases the importance of the text because bold tag covert the text into bold size.
<u> It is used to underline the text.
<tt> Teletype text gives the default font-family which is monospace.
<strike> It is an editing markup that tells the reader to ignore the text passage.
Logical Tags: Logical tags are used to tell the browser what kind of text is written inside the tags. Logical tags are also known as Structural tags because they specify the structure of the document.
<abbr> Defines the abbreviation of text.
<acronym> Defines the acronym.
<address> Contact information of a person or an organization.
<cite> Defines citation. It displays the text in italic format.
<code> Defines the piece of computer code.
<blockquote> Defines a long quotation.
28. What are forms and how to create forms in HTML?
HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of information such as username, password, contact number, email id etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons etc. Using these elements the information of an user is submitted on a web server.
The form tag is used to create an HTML form.
<form>
Username:<br />
<input type="text" name="username" />
<br />
Email id:<br />
<input type="text" name="email_id" />
<br /><br />
<input type="submit" value="Submit" />
</form>
29. What is the usage of a novalidate attribute for the form tag?
The novalidate attribute in HTML is used to signify that the form won’t get validated on submit. It is a Boolean attribute and useful if you want the user to save the progress of form filing. If the form validation is disabled, the user can easily save the form and continue & submit the form later. While continuing, the user does not have to first validate all the entries.
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" /><br /><br />
<input type="submit" />
</form>
30. What is SVG? Can we use it inside an HTML document?
What is SVG?
- SVG stands for Scalable Vector Graphics
- SVG is used to define vector-based graphics for the Web
- SVG defines the graphics in XML format
- Every element and every attribute in SVG files can be animated
- SVG is a W3C recommendation
- SVG integrates with other W3C standards such as the DOM and XSL
Yes SVG can be use inside HTML documents. e.g.,
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle
cx="50"
cy="50"
r="40"
stroke="green"
stroke-width="4"
fill="yellow"
/>
</svg>
</body>
</html>
SVG Code explanation
- An SVG image begins with an
<svg>element - The width and height attributes of the
<svg>element define the width and height of the SVG image - The
<circle>element is used to draw a circle - The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle's center is set to (0, 0)
- The r attribute defines the radius of the circle
- The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border" The fill attribute refers to the color inside the circle. We set the fill color to yellow
- The closing
</svg>tag closes the SVG image
Note: Since SVG is written in XML, all elements must be properly closed!
Huge thanks to Eugene, for creating this questions. Answers has been sourced from well known websites like MDN, w3schools & GeeksForGeeks
CoverPhoto by Jackson So on Unsplash
Top comments (0)