Document Structure

Top-level items: <!DOCTYPE html>, <html lang="...">, <head>, <body>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page title</title>
</head>
<body>...</body>
</html>

Attributes shown: lang, charset.

Text: headings, paragraphs, inline

Headings

<h1><...></h1> through <h6>.

H1 example

H2 example

Inline

<strong> makes text strong (<strong>), <em> emphasizes (<em>), <code> shows code.

Line breaks and comments:

<p>First line<br>Second line</p>
<!-- HTML comment: ignored by browser -->

CSS examples (color, size, location)

Inline style example (quick, overrides CSS):

<p style="color:crimson; font-size:18px; text-align:center;">Styled inline text</p>

Styled inline text

Class-based CSS (preferred for reuse):

<style>
.big-red{color:#c00;font-size:20px}
.right{float:right;margin-left:1rem}
</style>
<p class="big-red">Large red text</p>
<img src="01_python.jpg" alt="Python logo" class="right" width="120">

Large red text

Note: put image files like 01_python.jpg inside the same folder or an images/ directory and link with a relative path: <img src="images/01_python.jpg">.

Character Entities

Character entities let you write special characters in HTML. They usually start with & and end with ;.

This is useful when a character has a special meaning in HTML, like < or >, or when you want to type a symbol like an arrow.

<a href="01-welcome.html">&larr; Back to welcome post</a>
<p>HTML tags use &lt; and &gt; characters.</p>

Rendered examples:

← Back to welcome post

HTML tags use < and > characters.

Entity	Rendered character	Use
`←`	←	Left arrow
`→`	→	Right arrow
`&`	&	Ampersand
`<`	<	Less-than sign
`>`	>	Greater-than sign
`"`	"	Double quote
`©`	©	Copyright symbol
` `	One space	Non-breaking space

Links & Media

Links use href. Common attributes: target, rel, download.

<a href="https://example.com" target="_blank" rel="noopener">External</a>

Image example (relative link to a file in the same folder):

<img src="01_python.jpg" alt="Python logo" width="200" title="Python">

Rendered image example:

Lists & Tables

Unordered and ordered lists:

<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>

Rendered list output:

Item A
Item B

First
Second

Tables and attributes like colspan and rowspan:

<table>
<tr><th>Name</th><th>Score</th></tr>
<tr><td>Alice</td><td>95</td></tr>
<tr><td colspan="2">Combined row</td></tr>
</table>

Rendered table output:

Name	Score
Alice	95
Combined row

Forms & Inputs

Form attributes: action, method. Input types: text, email, password, checkbox, radio, file, submit.

<form action="/submit" method="post">
<label for="name">Name:</label>
<input id="name" name="name" type="text" placeholder="Your name" required maxlength="50">
<input type="email" name="email" required>
<label><input type="checkbox" name="agree" checked> Accept</label>
<button type="submit">Send</button>
</form>

Tip: use label for="id" so clicking the text focuses the input. Use required and maxlength for simple validation.

Semantic Elements

Use semantic tags for better structure and accessibility: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.

<article>
<header><h2>Post title</h2></header>
<section>Content</section>
<footer>Meta & links</footer>
</article>

Useful attributes & ARIA

id - unique identifier for anchors and scripting
class - group for styling
data-* - custom data attributes
title - advisory tooltip
aria-label, aria-hidden - accessibility helpers

<button id="save" class="primary" data-task="save" title="Save changes" aria-label="Save">Save</button>

Scripts & styles

Use <link rel="stylesheet" href="..."> for stylesheets and <script src="..." defer> for scripts.

<link rel="stylesheet" href="/styles.css">
<script src="/app.js" defer></script>