Web Developer Bootcamp Day Three

Section 4: HTML: Next Steps & Semantics

HTML semantics cheat sheet

title

• Second most important piece of content.
• Shown in the browser tab & search results.
• Should be unique for every page on the site.

main

• Primary content of the page.

section

• A group in a series of related content pieces.

article

• A piece of content that’s independent.
• Could be removed from this website and still make sense.

aside

• Secondary content not required to understand the main content.

nav

• Defines a group a navigation links.

header

• When inside body it’s the website masthead.
• When inside article it’s the most important information.

footer

• When inside body it’s the website footer.
• When inside article it’s the least important information.

figure

• Embeds annotated images, illustrations, photos, code, etc.
• Could be moved out of place and would still make sense.

figcaption

• For adding a caption/annotation to the figure
• Must be inside a figure element—cannot stand alone.

Figures & captions

• Use only if there’s a caption.

time datetime="…"

• Marks some text as a time or date.
• datetime defines the machine readable version.

VSCode Tip: Emmet

emmet cheatsheet