HTML, CSS Flashcards
What is doctype? Why do u need it?
Doctype is an instruction to the browser to inform about the version of html document and how browser should render it.
It ensures how element should be displayed on the page by most of the browser. And it also makes browser’s life easier. otherwise, browser will guess and will go to quirks mode. Moreover, doctype is required to validate markup.
What are data- attributes good for?
Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These days, using data- attributes is not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.
How can u generate public key in html?
html has a keygen element that facilitate generation of key and submission via a form.
keygen has to be used inside a form.
How can u change direction of html text?
use bdo (bidirectional override) element of html. dir='rtl' - right to left. dir='ltr' - left to right.
How can u highlight text in html?
use mark element.
What are optional closing tag? and why would u use it?
p, li, td, tr, th, html, body, etc. you don’t have to provide end tag. Whenever browser hits a new tag it automatically ends the previous tag. However, you have to be careful to escape it.
reason : you can save some byte and reduce bytes needs to be downloaded in a html file.
What is the difference between span and div?
div is a block element and span is inline element.
It is illegal to put block element inside inline element. div can have a p tag and a p tag can have a span. However, span can’t have a div or p tag inside.
When should you use section, div or article?
section - group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. A section normally has a heading (title) and maybe a footer too.
article - represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
div -on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes
What does float do?
float pushes an element to the sides of a page with text wrapped around it. you can create entire page or a smaller area by using float. if size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float left, right, none or inherit.
if you set, ‘float: left;’ for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.
How can you clear sides of a floating element?
If you clear a slide of an element, floating elements will not be accepted on that side. With ‘clear’ set to ‘left’, an element will be moved below any floating element on the left side. clear is used to stop wrap of an element around a floating element.
Which one would you prefer among px, em % or pt and why?
- px gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20px and child 16px. child would be 16px.
- em maintains relative size. you can have responsive fonts. em is the width of the letter ‘m’ in the selected typeface. However, this concept is tricky. 1em is equal to the current font-size of the element or the browser default. if u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px). em is cascade
- % sets font-size relative to the font size of the body. Hence, you have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px.
- pt(points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.
How absolute, relative, fixed and static position differ?
- absolute, place an element exactly where you want to place it. absolute position is actually set relative to the element’s parent. if no parent available then relatively place to the page itself.
- relative, is position an element relative to itself (from where the element would be placed, if u don’t apply relative positioning). for example, if u set position relative to an element and set top: 10px, it will move 10px down from where it would be normally.
- fixed, element is positioned relative to viewport or the browser window itself. viewport doesn’t changed if u scroll and hence fixed element will stay right in the same position.
- static, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position might be applied to an element.
What are the differences between visibility hidden and display none?
display: none removes the element from the normal layout flow and allow other elements to fill in. visibility: hidden tag is rendered, it takes space in the normal flow but doesn’t show it.
if u want to say it smartly, display: none causes DOM reflow where is visibility: hidden doesn’t.
What are the differences between inline, block and inline-block?
inline, elements do not break the flow. think of span it fits in the line. Important points about inline elements, margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignores height and width.
block, breaks the flow and dont sits inline. they are usually container like div, section, ul and also text p, h1, etc.
inline-block, will be similar to inline and will go with the flow of the page. Only differences is this this will take height and width.
What are the properties related to box model?
Technically, height, width, padding and border are part of box model and margin is related to it.
Everything in a web page is a box where you can control size, position, background, etc. Each box/ content area is optionally surrounded by padding, border and margin. When you set height and width of an element, you set content height and width.
