Slide 4 Web Eng

HTML

The default markup language of the Web

Purpose of HTML

To structure content on the Web

Markup language

A language used to annotate text or media with structure and meaning

Semantic vs non-semantic HTML

Semantic elements convey meaning; non-semantic elements only affect presentation

Why semantic HTML matters

Improves accessibility, SEO, and machine understanding

HTML document structure

A properly nested tree of elements

HTML attributes

Provide additional information about elements

Inline vs block elements

Inline elements stay in-line; block elements start on a new line

Purpose of HTML forms

Enable user interaction and data submission

Difference between GET and POST

GET sends data in the URL; POST sends data in the request body

Client-side validation

Validation performed in the browser before submission

Server-side validation

Validation performed by application logic on the server

Why server-side validation is required

Client input cannot be trusted

HTML5 semantic layout

,

,

,

,

,

DOM

A tree-based representation of an HTML document used by the browser

CSS

A language used to describe the presentation of HTML documents

Purpose of CSS

Separate content from presentation

CSS rule

A selector combined with property–value pairs

CSS selector

Defines which elements a rule applies to

Types of CSS usage

External, internal, and inline stylesheets

Best practice for CSS

Use external stylesheets

Inheritance in CSS

Some properties are inherited from parent elements

CSS cascade

Mechanism to resolve conflicting CSS rules

CSS cascade priority

Importance > specificity > source order

CSS specificity order

Element < class/attribute < ID < inline style

Static web pages

Pages with predefined content served directly by the server

Dynamic web pages

Pages that generate or modify content at runtime

Server-side dynamic pages

Content generated on the server before delivery

Client-side dynamic pages

Content generated or modified in the browser

AJAX

Technique for non-blocking client–server communication

Main benefit of AJAX

Updating parts of a page without reloading it

Fetch API

Modern browser API for making HTTP requests

Single Page Application (SPA)

Application where all interaction happens within one page

Multi-Page Application (MPA)

Traditional application with multiple HTML pages

SPA vs MPA

SPA is client-heavy; MPA is server-rendered

Server-side rendering (SSR)

Rendering HTML on the server before sending it to the client

Benefit of SSR

Better performance and SEO