Back to notes

Basics of HTML

Keywords: html, hyper text markup language
  • HTML stands for Hyper Text Markup Language:

    • markup language: defines structure and presentation
    • elements: wrap raw text and give the computer instructions on how to mark it up
    • hypertext: text displayed on a computer that gives access to other text via "hyperlinks"
  • browsers need to know what language something is in order to read it:

    • this is done with the DOCTYPE declaration:
      • <!DOCTYPE html>
      • must be the first line of code in all HTML documents
      • to begin writing HTML after the DOCTYPE declaration, create an <html></html> tag to wrap everything
  • <head> (wrapped in HTML):

    • contains the "metadata" for the page:
      • metadata is information that is kept hidden/not directly displayed
      • <title>:
        • specifies the title of the webpage
  • <body>:

    • contains the content of the webpage
    • includes everything displayed on the page
  • self-closing tags:

    • a tag can be self-closing when it contains all the information necessary for the browser to render it within the tag itself:
      • e.g. a line break: <br />
      • can be used anywhere
  • hierarchy (parent-child relationships between elements):

    • elements can be thought of in a hierarchy (tree) when they are nested within each other
  • Note: as code grows, it can be harder to keep track of how elements are related:

    • whitespace - spacing text across lines of code. doesn't get rendered, so it's purely for the developer.
    • indentaion - shows the hierarchy.
  • comments:

    • <!-- -->
    • can be used to provide context for developers
    • can be used to experiment with code (by "commenting it out")
  • Review:

    • Hyper Text Markup Language
    • most elements have opening and closing tags
    • self-closing tags cannot enclose text or other elements
    • comments provide context or experimentation abilities
    • elements can be nested and indentation can help make this clear
    • <!DOCTYPE html> declaration comes first
    • <html> element contains all HTML code