<!-- Links to another page or website -->
<a href="/about">Other page</a>
<a href="https://google.com">Other website</a>

<!-- A File or Resource -->
<a href="/img/my_image.jpg" download>Download Image</a>
<a href="/resources/info.pdf">View PDF</a>

<!-- An ID -->
<a href="#main">Skip to main content</a>
<a href="/about#contact">Contact the team</a>

.my_element:target {
	background: pink;
}

<details>
	<summary>This bit is clickable to expand/collapse</summary>
	<p>This content is hidden but can then be expanded or re-collapsed.</p>
</details>

<input name="email" required />

<input type="date" name="due_date">

<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />

div {
	& p {
		color: red;
	}
}

<input type="range" min="0" max="10" />

<input type="range" min="0" max="10" list="options" />
<datalist id="options">
	<option value="0">Not good</option>
	<option value="5">🤷‍♀️</option>
	<option value="10">Stupendous</option>
</datalist>

<input type="radio" id="t_1" name="testimonials" />
<label for="t_1">Quote 1</label>
<blockquote>
	<!-- Quote here -->
</blockquote>

div:has(p:nth-child(4)) {
	--children: 4;
}

div:has(p:nth-child(5)) {
	--children: 5;
}

<div class="toggle">
	<input id="off" type="radio" name="switch" value="off" checked />
	<label for="off">Off</label>
	<input id="on" type="radio" name="switch" value="on" />
	<label for="on">On</label>
	<span class="switch"></span>
</div>

body {
	@media(prefers-color-scheme: dark) {
		--background: #0d0d0d;
		--neutral: #f7f0eb;
	}
}

<input type="radio" name="images" value="i_1" id="img_1" checked />
<label for="img_1">Image 1</label>
<div class="image">
	<img src="img_1.jpg" alt="" />
</div>