Scribd
Upload
2 views

HTML_CSS_Quick_Revision_Notes

This document provides a quick revision guide on HTML and CSS, covering key topics such as meta tags, tables, block vs inline elements, responsive vs adaptive design, and quirks vs standards mode. It emphasizes the importance of meta tags for SEO, the structure of tables, and the differences between responsive and adaptive design. Additionally, it highlights the impact of Doctypes on rendering web pages.

Uploaded by

thevargiz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML_CSS_Quick_Revision_Notes

This document provides a quick revision guide on HTML and CSS, covering key topics such as meta tags, tables, block vs inline elements, responsive vs adaptive design, and quirks vs standards mode. It emphasizes the importance of meta tags for SEO, the structure of tables, and the differences between responsive and adaptive design. Additionally, it highlights the impact of Doctypes on rendering web pages.

Uploaded by

thevargiz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML & CSS Notes for Quick Revision

Meta Tags in HTML

- Meta tags provide metadata for a web page (e.g., author, character set, description).

- They reside in the <head> section of HTML, influencing SEO and browser behavior.

- Example tags:

- Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">

- Charset: <meta charset="UTF-8">

- Meta tags are not visible to users but are critical for SEO, mobile responsiveness, and search

engine crawling.

Tables in HTML

- Table Element (<table>): Used to organize data into rows and columns.

- Elements include: <tr> (rows), <th> (headers), and <td> (data cells).

Example:

<table>

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

<tr><td>Data 1</td><td>Data 2</td></tr>

</table>

- Use CSS to enhance tables with borders, padding, and responsive design:

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

Block-Level vs Inline Elements

* Block-Level Elements:

- Take up the full width of their container and start on a new line.
- Examples: <div>, <p>, <section>

* Inline Elements:

- Only take up as much width as needed; do not start on a new line.

- Examples: <span>, <a>, <strong>

Responsive vs Adaptive Design

- Responsive Design:

Uses fluid grids, relative units, and media queries to adjust to any screen size.

Example:

.container { width: 100%; padding: 20px; }

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

- Adaptive Design:

Uses multiple fixed layouts, each optimized for a specific device.

Example:

@media (min-width: 768px) { .container { width: 80%; } }

- Responsive adapts dynamically, while adaptive switches between predefined layouts.

Quirks vs Standards Mode

- Quirks Mode:

Browsers render the page like older versions for backward compatibility.

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

- Standards Mode:

Pages are rendered according to modern web standards.

Example Doctype: <!DOCTYPE html>

- Almost Standards Mode:

Middle ground between quirks and standards, maintaining some older behaviors.
Quick Recap Highlights

- Meta tags are critical for SEO and browser compatibility.

- Tables are versatile for data presentation; enhance them with CSS.

- Block vs Inline: Remember their layout behavior and use cases.

- Responsive vs Adaptive: Know when to use fluid layouts versus predefined.

- Quirks vs Standards Mode: Understand how different Doctypes impact rendering.

You might also like