Scribd
Upload
16 views12 pages

Interview FrontEnd

The document covers key concepts in HTML, including the importance of meta tags for SEO and mobile responsiveness, the structure and styling of tables, and the differences between block-level and inline elements. It also discusses responsive versus adaptive design, highlighting their unique characteristics and use cases. Additionally, it explains quirks mode, standards mode, and almost standards mode in web rendering.

Uploaded by

thevargiz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views12 pages

Interview FrontEnd

The document covers key concepts in HTML, including the importance of meta tags for SEO and mobile responsiveness, the structure and styling of tables, and the differences between block-level and inline elements. It also discusses responsive versus adaptive design, highlighting their unique characteristics and use cases. Additionally, it explains quirks mode, standards mode, and almost standards mode in web rendering.

Uploaded by

thevargiz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Meta Tags in HTML

Summary with Key Points: • Provide Metadata: Meta tags offer information about the
web page, such as author, character set, description, and viewport settings.
• Placed in <head>: Meta tags reside in the <head> section and are crucial for SEO,
mobile responsiveness, and search engine crawling.
• Not Visible to Users: Although not directly seen by users, meta tags influence
browser behavior, SEO, and social sharing.

Key Types of Meta Tags

1. Viewport Meta Tag


• Responsive Design: Ensures the web page adapts to different devices and screen
sizes.
• Example: <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Charset Meta Tag


• Character Encoding: Defines the character encoding of the page (e.g., UTF-8 for
special characters).
• Example: <meta charset="UTF-8">

3. Description Meta Tag


• SEO & Search Engines: Provides a short description shown in search engine results,
improving click-through rates.
• Example: <meta name="description" content="This is a tutorial on meta tags in
HTML.">

4. Keywords Meta Tag


• Less Important Today: Used to specify relevant keywords for SEO, though modern
search engines focus more on content.
• Example: <meta name="keywords" content="HTML, Meta Tags, SEO">

5. Author Meta Tag


• Page Author: Specifies the author of the document, helpful for content ownership.
• Example: <meta name="author" content="John Doe">

6. Robots Meta Tag


• Crawling Instructions: Tells search engines how to index or follow links on the page.
• Example: <meta name="robots" content="index, follow">

7. Refresh Meta Tag


• Page Redirection: Automatically redirects or refreshes the page after a specified time.
• Example: <meta http-equiv="refresh" content="5;url=https://example.com">
Quick Recap:

Meta tags play a vital role in controlling how web pages interact with search engines,
mobile devices, and social media platforms. Although some tags like keywords have
lost importance, others, such as viewport and charset, remain essential for modern
web development.

Displaying a Table on an HTML Webpage

Summary with Key Points:


• Table Element (<table>): Used to organize structured data into rows and columns.
• Rows and Cells: <tr> represents rows, <th> represents headers, and <td> holds data
cells.
• CSS for Styling: Borders, padding, and alignment enhance the table’s presentation.
• Responsive Tables: CSS allows tables to adjust for mobile devices, ensuring usability
across screens.

Key Concepts and Examples

1. Basic Structure

plaintext

Copy code

<table>

<tr>

<th>Header 1</th><th>Header 2</th><th>Header 3</th>

</tr>

<tr>

<td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td>

</tr>

</table>
2. Adding a Caption

plaintext

Copy code

<table>

<caption>Sample Data Table</caption>

<tr><th>Header 1</th><th>Header 2</th></tr>

<tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>

</table>

3. Column Span (colspan)

plaintext

Copy code

<table>

<tr><th colspan="3">Header Spanning 3 Columns</th></tr>

<tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td></tr>

</table>

4. Row Span (rowspan)

plaintext

Copy code

<table>

<tr><th>Header 1</th><th>Header 2</th></tr>

<tr><td rowspan="2">Row Spanning 2 Rows</td><td>Row 1, Cell 2</td></tr>

<tr><td>Row 2, Cell 2</td></tr>

</table>

5. Borders and Styling (Modern CSS Approach)

plaintext

Copy code

<style>

table, th, td { border: 1px solid black; border-collapse: collapse; }


th, td { padding: 10px; text-align: left; }

</style>

<table>

<tr><th>Header 1</th><th>Header 2</th></tr>

<tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>

</table>

6. Alignment and Padding

plaintext

Copy code

<style>

th, td { padding: 15px; text-align: center; }

</style>

7. Accessibility with Scope Attribute

plaintext

Copy code

<table>

<tr><th scope="col">Header 1</th><th scope="col">Header 2</th></tr>

<tr><th scope="row">Row 1</th><td>Cell 1</td></tr>

</table>

8. Responsive Table with CSS

plaintext

Copy code

<style>

.table-responsive { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }

</style>

<div class="table-responsive">
<table>

<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>

<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>

</table>

</div>

Quick Recap:

HTML tables are powerful tools for displaying structured data in a tabular format.
Adding CSS enhances presentation with borders, alignment, and padding. Responsive
design ensures usability across different screen sizes. Attributes like colspan, rowspan,
and scope improve accessibility and layout flexibility.

Difference Between Block-Level and Inline Elements

Summary with Key Points:


• Block-Level Elements: Take up the full width of the page and start on a new line.
• Inline Elements: Take only as much width as needed and stay within the same line as
surrounding content.
• Inline-Block Elements: Combine behaviors of both block and inline elements by
allowing size adjustments like block elements but remaining inline.
• CSS Flexibility: The display property can change elements' default behavior (e.g.,
display: inline or display: block).

Key Concepts and Examples

1. Block-Level Elements
• Characteristics:

• Take up the full width available.

• Start on a new line.

• Can contain both block and inline elements.


• Examples: <div>, <p>, <h1> to <h6>, <section>.

plaintext

Copy code
<div style="border: 1px solid black;">This is a block-level element.</div>

<p>This is a paragraph inside a block-level element.</p>

<div>Another block-level element starts on a new line.</div>

2. Inline Elements
• Characteristics:

• Take only the width required by the content.

• Stay on the same line as surrounding elements.

• Can contain only other inline elements or text.


• Examples: <span>, <a>, <strong>, <img>

plaintext

Copy code

<p>This is a <span style="color: blue;">blue inline text</span> inside a paragraph.</p>

<a href="#">This is an inline link</a>.

3. Key Differences Between Block and Inline Elements

Feature Block-Level Element Inline Element

Takes Full Width Yes No

Starts on a New Line Yes No

Can Contain Block Elements Yes No

Can Contain Inline Elements Yes Yes

Examples <div>, <p> <span>, <a>

4. Inline-Block Elements
• Behavior: Remain inline but allow width and height adjustments like block elements.

plaintext

Copy code
<span style="display: inline-block; width: 100px; height: 50px; background-color:
lightgrey;">Inline Block</span>

5. Converting Between Block and Inline Elements


• Using CSS: The display property changes an element’s behavior.

plaintext

Copy code

<p style="display: inline;">This paragraph behaves like an inline element.</p>

<span style="display: block;">This span behaves like a block-level element.</span>

Quick Recap:

• Block-Level Elements: Structure larger sections (e.g., paragraphs or dividers).


• Inline Elements: Useful for formatting text or adding links within paragraphs.
• Inline-Block Elements: Provide layout flexibility by allowing size customization while
remaining inline.
• CSS Adjustments: Use display to switch between block, inline, and inline-block
behaviors.

Responsive Design vs. Adaptive Design

Summary with Key Points:


• Responsive Design: Uses fluid grids, flexible layouts, and media queries to adjust
dynamically to any screen size.
• Adaptive Design: Uses multiple fixed layouts optimized for specific devices or screen
widths.
• Key Difference: Responsive adapts dynamically; Adaptive switches between
predefined layouts.

Key Concepts and Examples

1. Responsive Design
• How It Works: Adjusts content seamlessly based on screen size and orientation.
• Primary Technique: Uses relative units (%, em, rem) and CSS media queries.

plaintext
Copy code

<style>

.container {

width: 100%; padding: 20px; background-color: lightblue;

@media (min-width: 768px) { .container { padding: 40px; } }

@media (min-width: 1200px) { .container { padding: 60px; } }

</style>

<div class="container">Responsive Container</div>

Explanation: The padding changes dynamically as the screen width increases.

2. Adaptive Design
• How It Works: Loads a fixed layout based on specific device types or breakpoints.
• Primary Technique: Uses CSS breakpoints for switching between layouts.

plaintext

Copy code

<style>

.container {

padding: 20px; background-color: lightcoral;

@media (min-width: 768px) and (max-width: 1199px) {

.container { width: 80%; }

@media (min-width: 1200px) {

.container { width: 60%; }

</style>
<div class="container">Adaptive Container</div>

Explanation: This container switches between 100%, 80%, and 60% widths based on
the screen size.

Key Differences Between Responsive and Adaptive Design

Aspect Responsive Design Adaptive Design

Layout Fluid, adjusts dynamically Multiple fixed layouts

Flexibility Works on any screen size Limited to predefined sizes

Performance Faster, single layout Slower, multiple layouts loaded

Maintenance Easier (one codebase) Harder (multiple layouts)

Technology CSS media queries, flexible grids Predefined layouts with detection

Use Case Blogs, websites E-commerce, dashboards

Real-World Use Cases

Responsive Design
• Example: News websites and blogs with content that flows across various screen
sizes.

Adaptive Design
• Example: E-commerce platforms or dashboards optimized for tablets and phones.

Quick Recap

• Responsive Design: Future-proof, flexible, and adjusts dynamically to all screen


sizes.
• Adaptive Design: Provides better optimization by using specific layouts for different
devices, but at the cost of complexity and maintenance.
• Modern Approach: Many websites use a mix of both — responsive for general layouts
and adaptive techniques for critical breakpoints.
1. Quirks Mode

• Definition: In quirks mode, browsers render the page similar to how older
browsers (like Internet Explorer 5) would, to maintain compatibility with legacy
websites.

• Why It Exists: It helps older websites function properly without forcing


developers to update them to meet modern standards.

• Rendering: The browser relaxes certain CSS rules, such as margin collapsing
and box model behavior (e.g., width includes padding and borders).

Example:

html

Copy code

<!DOCTYPE html SYSTEM "about:legacy-compat">

<html>

<head>

<title>Quirks Mode Example</title>

</head>

<body>

<div style="width: 100px; padding: 10px; border: 2px solid black;">

Quirks Mode Box

</div>

</body>

</html>

• In quirks mode, the width of the <div> will include padding and borders,
resulting in less available space for content inside the box.

o Total width: 100px (width) + 10px (padding on both sides) + 2px (border on
both sides) = 124px

2. Standards Mode (Full Standards Mode)


• Definition: In standards mode, browsers render the page according to the latest
HTML5 and CSS3 specifications, ensuring consistent behavior across
browsers.

• Rendering: CSS rules, such as the box model, are applied correctly (i.e., the
width only applies to the content, and padding/borders are added outside).

• When Used: If the DOCTYPE declaration is correct, the browser renders in


standards mode.

Example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Standards Mode Example</title>

</head>

<body>

<div style="width: 100px; padding: 10px; border: 2px solid black;">

Standards Mode Box

</div>

</body>

</html>

• In standards mode, the width is content-only:

o Total width: 100px (content width) + 10px (padding on both sides) + 2px
(border on both sides) = 124px total, but the content area is still 100px.

3. Almost Standards Mode (Limited Quirks Mode)

• Definition: Almost standards mode is a middle ground between quirks mode


and standards mode. It fixes most quirks, but a few layout-related behaviors,
such as the handling of table cells or image alignment, remain compatible with
older browsers.
• Why It Exists: It helps pages that rely on some legacy behaviors (like table
layouts) work without breaking while following other modern standards.

• When Used: Some DOCTYPEs (such as XHTML 1.0 Transitional) trigger almost
standards mode.

Example:

html

Copy code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Almost Standards Mode Example</title>

</head>

<body>

<table>

<tr>

<td style="vertical-align: middle;">

Content aligned like in legacy browsers.

</td>

</tr>

</table>

</body>

</html>

• In almost standards mode, table cell rendering or vertical alignment behaves


similarly to quirks mode, but other CSS behaviors align with standards mode.

You might also like