HTML and CSS Essentials

Learn the core building blocks: HTML elements, attributes, and how CSS hooks onto them to control presentation.

Every element has an opening tag, optional content, and a closing tag.

The browser reads this tree (called the DOM) to render the page.

• Tag name: p defines a paragraph.
• Attributes: class and title supply metadata.
• Content: Inner text that users see.

If you want to read more or get an in-depth understanding, see HTML Elements and HTML Attributes in the HTML tutorial.

• class - groups elements for CSS styling.
• id - unique identifier for one element (useful for anchors and scripting).
• title - tooltip text.
• lang - language of a document or element ( <html lang="en"> ).
• data-* - custom data attributes for scripts or styling hooks.

Reference: HTML Global Attributes .

Use selectors based on tag, class, or id to style the markup.

Inline styles work, but external stylesheets keep projects maintainable.

If you want to read more or get an in-depth understanding, see CSS Syntax and How To Add CSS in the CSS tutorial.

Prefer semantic tags ( <header> , <nav> , <main> , <section> , <footer> ) over generic <div> s.

They help screen readers and search engines understand the page.

Check HTML Semantics for full definitions.

• Block elements (e.g., <div> , <section> , <p> ) span full width and start on a new line.
• Inline elements (e.g., <span> , <a> , <strong> ) only take necessary width.

This distinction affects layout and is crucial when applying CSS display rules.

If you want to read more about HTML Block & Inline or get an in-depth understanding, go to HTML Block & Inline in the HTML tutorial.

Indent child elements consistently to visualize hierarchy.

Browsers ignore extra whitespace, but it makes code easier to read for us humans.