Skip to content

Instantly share code, notes, and snippets.

@d-kja
Last active December 31, 2022 17:15
Show Gist options
  • Save d-kja/2485478fd05c665778a55f8fcee8b1f9 to your computer and use it in GitHub Desktop.
Save d-kja/2485478fd05c665778a55f8fcee8b1f9 to your computer and use it in GitHub Desktop.
Useful html base

HTML

Basic structure

  • header
    • nav
  • main
    • article
    • section
    • form
  • footer
  • aside

Text

  • h1 ... h6
  • p
  • strong
  • span

Content structure

  • table
    • tr
      • th
      • td
  • ul/ol
    • li

Others

  • input/label
  • img
  • a

Accessibility

Attributes

  • img > alt
  • section/div/any > aria-label/role, title
  • tab key > tab-index (defines the sequence the tab key should follow)

Form structure

  • form
    • fieldset
      • legend

      • label

      • input

      • example:

        form structure example
@d-kja
Copy link
Author

d-kja commented Dec 31, 2022

ways to validate html:

@d-kja
Copy link
Author

d-kja commented Dec 31, 2022

Meta tags (SEO)

  • :title
  • :desc (160 char)
  • :keywords
    • eg. <meta name="keywords" content="example, html, meta, tags, accessibility, bla, bla" />
  • :robots
    • "A robots meta tag which instructs the search engine crawler not to index a page, or follow any links on it"
      • eg. <meta name="robots" content="noindex, nofollow" />
    • "now to index and also follow your page"
      • eg. <meta name="robots" content="index, follow" />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment