n4p0l3on ba24n

March 23, 2023

My Semantic HTML Cheatsheet.

Cat typing on a computer

Hi! Here's a quick summary of the notes I took during the Semantic HTML lesson from CodeCademy. After 3 days of overthinking and some Google searchs to help me with a few coding doubts, I finally came up with this table. I hope is useful for someone.

Tags

Tag Name Use
<header> Header The header tag is used to contain navigational links or introductory content.
<nav> Nav The nav tag is used as a block for navigation links such as menus or tables of content, usually inside header tags.
<main> Main The main tag is used to encapsule the dominant content within a webpage.
<footer> Footer The footer tag is used at the bottom opf the page to hold contact info, sitemap, or other related links.
<article> Article The article tag is used to hold independent or reusable conten, for example a forum post or a blog entry.
<section> Section The section tag is used to divide groups of information on the site. It can be used to divide home page or inside an article to separate chapters.
<aside> Aside This tag is used to mark additional information that can enhance another element but isn't required in order to understand the main content (like bibliographies or end notes).
<figure> Figure This tag is used to encapsulate media, ususally referenced in the main flow of the document; such as images, diagrams, or code snippets.
<figcaption> Figure Caption This tag goes inside the figure tag and is used to describe the media inside it.
<audio> Audio This is an element used to embed audio content. It requires a source and the type of audio (not mandatory, but is best practice).
<video> Video The video tag is used to display videos. It also requires a source and some complementary attributes.
<embed> Embed This is a deprecated tag. It is self-closing. It's also used to add media content.

Attributes

Attribute Name Related Tags Use
<controls> Controls <audio>, <video> This attribute provides basic play/pause/mute features.
<autoplay> Autoplay <audio>, <video> This attribute plays the audio or video as soon as it can do so.
<loop> Loop <audio>, <video> This attribute will indefinitely repeat the audio or video as soon as it finished.
File Not Supported n/a <audio>, <video> This is NOT an attibute, but text to put inside the element to be displayed in case the browser can't load the media file.