HTML & CSS Frequently Asked Questions
1. What are semantic and non-semantic elements?
Semantic refers to a specific purpose. It can't be used for any another purpose. Non
semantic can be used for any purpose.
Ex: <img>, <p>, <h2> → Semantic
<div>, <span> → Non Semantic
2. What are generic and non-generic elements?
Generic elements have pre-defined functionality. Non Generic need to be configured with
functionality explicitly.
Ex: <form> → Generic
<div> → Non Generic
3. What are inline & block level elements?
A block level element will not allow any another element in the same line. An inline element
will allow other elements in the same line.
Note: However you can transform an inline element to block level and vice versa.
Ex: <p> → Block level
<img> → Inline
4. What is difference between .html & .htm?
Technically both are same. .htm is extension given for page according to naming
conventions.
5. What is round-trip?
It is the process of loading resources every time from server.
6. How to save round-trip?
By caching the content.
7. What is caching?
It is the process of storing frequently requested content into buffer. (temporary memory)
8. What is difference between <br> & <br />?
There is no <br /> in HTML. It is just a self-ending syntax for void elements to suppress
warnings.
9. What is <var>?
Variables are storage locations in memory where you can store a value and use it as a part
of any expression. Variables in code snippet are represented with <var> to make them
compiler friendly.
10. How to present a token in page?
By using entities like <, >
<html> → <html>
11. Why do we need a heading element if we can define styles explicitly?
It is required to keep the topics SEO friendly. SEO identifies the topic only when it is defined
using heading style.
12. What are the default styles defined for heading element?
Every heading is configured with > font-size > font-weight > display: block
13. How to remove any default style?
By using CSS inheritance value unset.
css
h1 {
font-weight: unset;
font-size: unset;
display: unset;
}
14. Can we modify the default heading style?
Yes
css
h1 {
font-size : 60px;
color: red;
font-style: italics;
}
15. How to set first line indent for paragraph or blockquote?
By using CSS text-indent attribute.
css
p, blockquote {
text-indent: 200px;
}
16. How to set spacing between lines, words and chars?
By using CSS attributes
> letter-spacing: space between chars
> word-spacing: space between words
> line-height: space between lines
17. How to set drop-cap for paragraph?
css
p::first-letter {
font-size : 40px;
font-family: Arial;
float: left;
line-height: 20px;
}
18. How to design a scrollable paragraph content?
By controlling overflow for container with specified height and width.
css
p{
height : 200px;
width: 400px;
border: 1px solid gray;
padding: 10px;
overflow: auto;
}
19. How to set ellipsis for paragraph?
css
p{
width: 400px;
border :1px solid gray;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
20. How to configure continuous columns?
css
.container {
columns : number;
column-width: px;
column-gap : px;
column-rule : line_between_columns;
}
21. What is difference between <b> & <strong> and <i> & <em> etc.?
<strong>, <em>, <ins>, <del> are review elements.
<b>, <i>, <u>, <strike> are design elements.
22. What is difference between design and review elements?
In design phase developer designs a document.
In review phase a reviewer verifies and suggests. Review elements are used for suggestions
in design.
23. What are web safe fonts?
Fonts available on every device:
serif
sans-serif
monospace
24. What are the font size levels?
x-small
small
normal
medium
large
x-large
xx-large
25. What is default font size?
Size is 3 (normal)
26. What are the types of lists in HTML?
Data List: <dl>, <dt>, <dd>
Ordered List: <ol>, <li>
Unordered List: <ul>, <li>
