DEV Community

Dom
Dom

Posted on

1

Web Developer Bootcamp Day Three

Section 4: HTML: Next Steps & Semantics

semantic html tags

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay