Inspired by the blog post by Brad Frost. Periodic Table of Elements

Levels of design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Atoms

Basic building blocks of a page. Atoms are HTML tags, such as a form label, input, or button. Atoms can also include more abstract elements like colour palettes, fonts, or more invisible aspects, such as animations.

ROOT ELEMENT

HTML TAG: Root of an HTML document. Container for all other HTML elements. Contains the lang attribute, which defines the language of the element’s content and is used to help search engines.

METADATA AND SCRIPTING

HEAD TAG: Container for metadata. Can contain the following elements:

  • <title>
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

TITLE TAG: Defines a title for the HTML document in the browser toolbar, favourites, and search engine results.
META TAG: Describes metadata within an HTML document. Metadata is data (information) about data. <meta> tags always go inside of a <head> element, and are used to specify:

  • character set,
  • page description,
  • keywords,
  • author of the document,
  • and viewport settings.

The viewport refers to the visible area of a screen or window, and is used to ensure websites adapt to different screen sizes.
BASE TAG: Specifies the base URL and/or target for all relative URLs in a document. There can only be one single <base> element in a document, and it must be inside of the <head> element.