Text Elements
This is a paragraph. Strong text, emphasized text, marked
text, small text, deleted text, inserted text,
subscript, superscript.
HTML is the standard markup language for creating web pages.
This is a blockquote.
This is an inline quote.Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
Lists
- Unordered list item 1
-
I have a p in me
-
pause not liike that 😭
- don't usually see order lists out in the wild do you?
- Ordered list item 2
- Ordered list item 3
- Definition Term 1
- Definition Description 1
- Definition lists
- a niche and ununsed HTML tags for defining terms, concepts, or phrases (glossary)
Tables
| Abbreviation | File format | MIME type | File extension(s) | Summary |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng |
.apng, .png |
Good choice for lossless animation sequences (GIF is less performant).
AVIF and WebP have better performance but less broad browser support. Support: Chrome, Edge, Firefox, Opera, Safari. |
| AVIF | AV1 Image File Format | image/avif |
.avif |
Good choice for both images and animated images due to high performance and royalty free image format.
It offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency, etc.
Note that when using AVIF, you should include fallbacks to formats with better browser support (i.e. using the |
| GIF | Graphics Interchange Format | image/gif |
.gif |
Good choice for simple images and animations.
Prefer PNG for lossless and indexed still images, and consider WebP, AVIF or APNG for animation sequences. Support: Chrome, Edge, Firefox, IE, Opera, Safari. |
| JPEG | Joint Photographic Expert Group image | image/jpeg |
.jpg, .jpeg, .jfif,
.pjpeg, .pjp
|
Good choice for lossy compression of still images (currently the most popular).
Prefer PNG when more precise reproduction of the image is required, or WebP/AVIF if both better reproduction and higher compression are required. |
| PNG | Portable Network Graphics | image/png |
.png |
PNG is preferred over JPEG for more precise reproduction of source images, or when transparency is needed. WebP/AVIF provide even better compression and reproduction, but browser support is more limited. |
| SVG | Scalable Vector Graphics | image/svg+xml |
.svg |
Vector image format; ideal for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes. Support: Chrome, Edge, Firefox, IE, Opera, Safari. |
| WebP | Web Picture format | image/webp |
.webp |
Excellent choice for both images and animated images.
WebP offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc.
AVIF offers slightly better compression, but is not quite as well-supported in browsers and does not support progressive rendering. Support: Chrome, Edge, Firefox, Opera, Safari |
Forms
Media
Below we got some ultra high-def large images coming from and . You can expect some page jumps; you should be using the
width and height attributes to prevent this.
Notice the image above and below are very large but will always be contained within the viewport and maintain their aspect ratio 😊.
figure (and this is a figcaption).
This make the image visually centered otherwise the will be aligned to the reading direction.
Below is an svg image that has an intrinsic width and height (of 512px) so it will grow to that
dimension even without the width and height attributes being set.
However the below svg does not have an a set width and height so it will always grow to the size of
the screen and needs a width and height.
images are still "inline" elements so if space permits they will be displayed side by side
However if you place an image inside a text tag such as
<p> it will float left or right if it's odd or even respectively. The thought process is that image
complements the text but shouldn't break the reader's flow. So if you want an image to be sequential
to the text you should use <figure> or place the img after the text
tag (as which has been done😉).
if you're wondering why there's so much page jumps is because most of the images don't have their dimensions specified, the way it iis for most images in tthe wild 🥲. Don't do that; this is only for illustrative puposes to show caCSScade's effectiiveness with realistic (though bad) HTML: not only on optimal and best practices code like yours, obviously.
Not much I did with the audio element
Interactive Elements
More Info
This is additional information.