<h1>Hello</h1>
<p>This is a paragraph.</p>
class → assigns a class name
id → assigns a unique identifier
src, href, alt, etc.
<p class="intro">This is an introduction paragraph.</p>
<img id="logo" src="logo.png" alt="Site Logo">
Type selectors – target HTML tags directly: p, h1, img
Class selectors – target elements by their class attribute: .intro
ID selectors – target elements by their id attribute: #logo
Combination / descendant selectors – more specific targeting, e.g., div p
p { color: blue; font-size: 16px; }
.intro { font-weight: bold; }
#logo { width: 150px; border: 1px solid black; }
<p style="color:red;">This is red text</p>
<style>
p { color: blue; }
</style>
<link rel="stylesheet" href="style.css">
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata, settings, links -->
<!-- title: text shown in browser tab -->
<title>My Website</title>
<!-- meta: SEO, character set, viewport settings -->
<meta charset="UTF-8">
<!-- link: external CSS files -->
<link rel="stylesheet" href="styles.css">
<style>
<!-- internal CSS -->
</style>
<!-- script files -->
<script src="script.js" async></script>
<script>
<!-- embedded script -->
</script>
</head>
<body>
<!-- Visible page content -->
<!-- Text, Images, Links, Buttons, Forms -->
<!-- Layout containers (div, section, etc.) -->
</body>
</html>
<div id="header">...</div>
<div id="main">
<div class="section">...</div>
<div class="article">...</div>
</div>
<div id="footer">...</div>
Sections are created with class attributes
<header>...</header>
<main>
<section>...</section>
<article>...</article>
</main>
<footer>...</footer>
Sections are created with meaningful semantic tags