HTML & CSS I Flashcards
What is semantic?
Semantic refers to the meaning or significance of something. In the context of web development and HTML,** semantic relates to the meaning and structur**e that HTML tags provide to a web page. A semantic HTML tag describes its content both to the browser and the developer in a meaningful way, making it clear what role that content plays on the page. This helps in improving accessibility, SEO, and maintainability of the code.
header, footer, nav, article, main, section, aside, h1-h6
What is a purpose of semantics?
For example, instead of using a generic <div> or <span>, which have no inherent meaning, you can use semantic tags like <header>, <article>, or <footer> to clearly define parts of your document.</span>
Span<> vs div<> long version
The primary difference between <div> and <span> elements in HTML lies in their semantic meaning and their intended use within the structure of a webpage</span>
<div> (block-level element):
The <**div**> element is a **block-level container** meaning it takes up the **full width available**, **stacking content vertically** (one block after another).
Block-level elements always **start on a new line.**
It’s often used to **group larger chunks of conten**t, such as sections, articles, or multiple paragraphs.
<**span**> (inline-level element):
The <span> element is an i**nline-level container,** meaning it takes up only **as much width as its content requires.** **It doesn’t force content onto a new line.**
Inline elements appear within a line of text or other inline elements.
**It’s typically used to apply styling or scripting to a part of the content without affecting the layout of other elements.**
</span></div>
Span<> vs div<> in Summary
<div>: Block-level, used for grouping larger content, takes up the full width, starts on a new line.
<span>: Inline-level, used for styling or grouping smaller parts of content, takes up only as much width as needed, remains in line with surrounding text.
Both <div> and <span> are non-semantic elements, meaning they don’t provide any inherent meaning to the content (unlike <header>, <article>, etc.), but they’re useful for structuring and styling content.
</article></header></span></div></span></div>
Inline styles
Inline styles in HTML refer to CSS styles that are applied directly to individual HTML elements using the style attribute. This allows you to apply specific styles to a single element without needing to create a separate CSS class or stylesheet.
most precise, most important, directly on tag
Characteristics of Inline Styles
Specificity: Inline styles have a higher specificity than styles defined in external stylesheets or <style> blocks. This means they will usually take precedence over those styles unless there are other styles that are marked as !important.</style>
Immediate Effect: Styles are applied immediately to the element they are attached to, allowing for quick adjustments without needing to edit external files.
Limited Scope: Inline styles only apply to the element in which they are defined. They cannot be reused across multiple elements, which can lead to code duplication if the same styles are needed for several elements.
Specificity
Specificity in CSS refers to the set of** rules that determines which styles are applied to an element when there are conflicting CSS rules.**
It is a hierarchical mechanism that helps browsers decide which CSS rules take precedence over others. Understanding specificity is crucial for writing efficient and maintainable CSS.
Specificity Calculation
- Inline styles:
Example: <p style="color: red;">
Specificity: 1, 0, 0, 0 (a=1, b=0, c=0, d=0)
2.ID selectors:
Example: #header { color: blue; }
Specificity: 0, 1, 0, 0 (a=0, b=1, c=0, d=0)
3.Class selectors:
Example: .menu { color: green; }
Specificity: 0, 0, 1, 0 (a=0, b=0, c=1, d=0)
4.Type selectors:
Example: div { color: yellow; }
Specificity: 0, 0, 0, 1 (a=0, b=0, c=0, d=1)
- Combined selectors:
Example: div.menu#header { color: purple; }
Specificity: 0, 1, 1, 1 (a=0, b=1, c=1, d=1)
What is the difference between display: none and visibility: hidden?
display: none;
Removes the Element from the Document Flow: When an element is set to display: none;, it is completely removed from the layout of the page. This means that the space it occupied is also removed, and other elements will move to fill that space.
->The element **is not rendered in the page at all. **As a result, it is not interactive; users cannot click on it, and it cannot receive any events (e.g., hover, focus, etc.).
visibility: hidden;
Hides the Element but Maintains Space: When an element is set to visibility: hidden;, it remains in the layout of the page, but it is invisible.** The space it occupies is still accounted for, meaning that other elements do not shift to fill that space.**
-> The element remains part of the document flow and can still receive events, even though it is not visible. For instance, users can still tab through the element if it is focusable (like a button or link).
What is CSS preprocessor and what is it used for?
A CSS preprocessor is a scripting language that extends CSS with additional features, allowing developers to write more maintainable, modular, and efficient stylesheets. CSS preprocessors add functionality to CSS through features such as variables, nested rules, mixins, and functions, which are not available in standard CSS. After the code is written in the preprocessor’s syntax, it is compiled into standard CSS that browsers can understand.
Sass (Syntactically Awesome Style Sheets):
Variables
Nesting
Mixins
Partials and Imports
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 is the use of data- attribute?
allow you to store extra information/ data in the DOM. u can write valid html with embedded private data. You can easily access data attribute by using javascript and hence a lot of libraries like knockout uses it.
How can u highlight text in html?
use mark element.
Can u apply css rule to a part of html document?
Yes. by using “scopped” in the style tag.
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.
Span vs div- what is illegal
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.
</div></article></section>
What are the difference between svg and canvas
SVG: vector based, Better for static graphics, Better support for accessibility, Logos, icons, charts, animations
Canvas: Bitmap-based, pixel based, Requires manual state management, Less accessible
What is the difference between <strong><em> and <b><i> tags?</i></b></em></strong>
<strong> and <em>:</em></strong>
These tags provide information about the importance or emphasis of text to screen readers, making them more accessible for users with disabilities. Screen readers may announce text within <strong> as “strong” and within <em> as “emphasized.”
<b> and <i>:</i></b></em></strong>
Since these tags are purely presentational, they do not convey any additional information to assistive technologies, making them less accessible. Text styled with <b> and <i> is visually bold and italicized, respectively, but it lacks semantic meaning.</i></b>
What are the new DocType and Charset in HTML5?
The DocType element communicates the HTML version to the browser. It usually appears in the first line of code of an HTML page. Unlike the earlier versions/standards of HTML, DocType has a simplified format in HTML5.
The CharSet is a new meta tag attribute in HTML5 that configures the character encoding.
What all new Form elements were introduced in HTML
Here is the list of new form elements available in HTML5.
<datalist> – It specifies a list of options for input controls.
<keygen></keygen> – This tag generates an encryption key.
<output> – It defines the result of an expression.
</output></datalist>
What are various elements that provide better structuring in HTML5?
<article> – This element allows specifying an article.
<aside> – It allows you to view content other than the page content.
<bdi> – It lets a part of the text get formatted in a different direction from other text.
<command></command> – It displays a button element that processes a command upon user action.
<details> – It adds additional details that a user can show or hide.
<dialog> – It initializes a dialog box or popup window.
<figure> – This element can show illustrations, diagrams, photos, and code listings.
<figcaption> – It adds a caption for the image specified by an <figure> element.
<footer> – This tag appends a footer to a document.
<header> – This tag inserts a header into a document.
<hgroup> – If a page includes multiple headings, then this tag groups them into a set of <h1> to <h6> elements.
</h6></h1></hgroup></header></footer></figure></figcaption></figure></dialog></details></bdi></aside></article>
Q-3. Which of the HTML5 elements supports media content?
<audio> – It specifies sound content.
<video> – It links to a video.
<source></source> – This tag specified the source of video and audio links.
<embed></embed> – It acts as a container for external applications.
<track></track> – This element defines tracks for video and audio.
</video></audio>
What is SVG and why do you use it?
SVG is an acronym for Scalable Vector Graphics as recommended by W3C.
Its purpose is to display vector-based graphics over the Web.
The graphics use an XML format.
SVG graphics are of higher quality and do not lose it even when resized.
All elements and attributes of SVG support animation.
What does Canvas mean in HTML? And what is its default border size?
Canvas is an HTML5 element that can draw graphics on the fly with the help of JavaScript. The <canvas> element can only contain graphics. It supports a number of methods for drawing paths, boxes, circles, text, and images.</canvas>
By default, It has no border. However, it allows the use of CSS to change the border style.
How does Canvas differ from SVG?
Here are a few points elaborating on the differences between Canvas and SVG.
Canvas depends on the resolution whereas SVG doesn’t.
It does not allow event handlers whereas SVG does provide support for event handlers.
Canvas is ideal for graphics-intensive games whereas SVG doesn’t intend for gaming.
It works well for small rendering areas whereas SVG may perform better for large rendering areas like Google Maps.
Does HTML5 provide drag and drop facility? How do you set an image as draggable?
To set an image as draggable, initialize the draggable attribute with true.
<img></img>
What is HTML5 Web Storage?
HTML5 brought this new ability to store web pages within the browser cache. This web store is not only faster than the cookies but secured too. It is capable of storing a large amount of data without compromising the performance of the website.
What is the difference between localStorage and sessionStorage objects?
The following points describe the differences between the localStorage and sessionStorage objects.
The <localStorage> object **doesn’t have an expiry for the stored data** whereas the <sessionStorage> object **keeps it only for a single session**.</sessionStorage></localStorage>
The <localStorage> object doesn’t have a provision to delete the data upon closing of the browser window whereas the <sessionStorage> **object clears it simultaneously with the window closing down**.</sessionStorage></localStorage>
What are the elements of the CSS Box Model?
The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border).
