HTML CSS Fundamentals

HTML5 semantic elements provide meaningful structure to web pages. They describe the role of their content rather than just its appearance. Examples include <header>, <nav>, <main>, <article>, <section>, and <footer>. They improve accessibility, SEO, and code readability.

<section> is a semantic element that represents a thematic grouping of content, typically with a heading. <div> is a non-semantic generic container with no inherent meaning. Use <section> when content forms a logical group; use <div> purely for styling or layout purposes.

The <article> element represents a self-contained composition that could be independently distributed or reused. Examples include:Blog postsNews articlesForum postsProduct cardsEach <article> should make sense on its own, even outside the context of the page.

The <nav> element represents a section of a page that contains navigation links, either within the site or to other sites. It is intended for major navigation blocks, not every group of links. Screen readers use it to determine what to skip or jump to directly.

<figure> wraps self-contained content like images, diagrams, or code snippets that are referenced in the main flow. <figcaption> provides a caption or legend for the figure.
Example:
<figure><img src="chart.png"><figcaption>Sales data</figcaption></figure>

HTML5 introduced many input types beyond text and password:email – validates email formaturl – validates URL formatnumber – numeric input with spinnersrange – slider controldate, time, datetime-localcolor – color pickersearch – search fieldtel – telephone number

The <label> element associates a text description with a form control. It improves accessibility by allowing screen readers to announce the label when a user focuses the input.
Two methods:
<label for="name">Name</label><input id="name">
or wrapping:
<label>Name <input></label>

The required attribute is a boolean HTML5 attribute that specifies an input field must be filled out before submitting the form. The browser performs built-in validation and displays a default error message if the field is empty. Example: <input type="email" required>

ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for users with disabilities. Key attributes include:aria-label – provides an accessible namearia-hidden – hides elements from screen readersaria-live – announces dynamic content changesrole – defines the purpose of an elementUse ARIA only when native HTML semantics are insufficient.

The alt attribute provides alternative text for images. It is critical for accessibility because:Screen readers read it aloud for visually impaired usersIt displays when images fail to loadIt helps search engines understand image contentDecorative images should use an empty alt="" so screen readers skip them.

CSS selectors target HTML elements for styling. Basic types include:Element: p { } – selects all paragraphsClass: .intro { } – selects elements with class "intro"ID: #header { } – selects the element with id "header"Universal: * { } – selects all elementsAttribute: [type="text"] { } – selects by attribute

The descendant selector (div p) selects all <p> elements anywhere inside a <div>, no matter how deeply nested.
The child selector (div > p) selects only <p> elements that are direct children of a <div>. Child selectors are more specific and performant.