Basics 101 - HTML

  1. What is HTML?

    "Hyper Text Markup Language" which tells you absolutely nothing.

    In practice, HTML shows the relationships between objects and the attributes they have and share. This is because HTML is an extension (that is, it builds upon), XML. To know HTML we first need to know the basics of XML.

  2. XML

    As mentioned before HTML (and thus XML) shows the relationships between objects. An example of this would be a family. A parent may have children, siblings, or even grandchildren. XML would display that as:

    <parent>
      <child></child>
      <child></child>
    </parent>
    <sibling></sibling>

    Notice that there are two types of `parent` tags here. There's `<parent>` and `</parent>`. These are the opening and closing tags. Every element in html has an opening tag as well as a matched closing tag. Anything in between the opening and closing tag is considered a child of the element - or rather it means that anything in between belongs to the element that contains it.

    Pop quiz

    What's the child of the `<unicycle>` element and what's the sibling?

    <unicycle>
      <wheel></wheel>
    </unicycle>
    <clown></clown>
    
    Child: <wheel>
    Sibling: <clown>
    

    Elements can have one and only one parent at any given time. In XML there's no way to distribute something so it belongs to two elements at a time. The XML structure can be thought of as a tree. Every element has 1 and only 1 parent, and can have any amount of children.

    Pop quiz

    1. What's the parent of the `<wheel>` element?
    2. What about a `<spoke>` element?
    3. How would you describe the relationship between a `<spoke>` and the `<bike>`?
    <bike>
      <wheel>
        <spoke></spoke>
        <spoke></spoke>
        <spoke></spoke>
        <spoke></spoke>
        <spoke></spoke>
      </wheel>
      <wheel>
        <spoke></spoke>
        <spoke></spoke>
        <spoke></spoke>
        <spoke></spoke>
        <spoke></spoke>
      </wheel>
    </bike>
    
    1: <bike>
    2: <wheel>
    3: <bike> is the grandparent of <spoke>
    
  3. HTML

    HTML builds upon XML by adding four things:

    HTML additions to XML

    1. Standardized tag names
    2. IDs
    3. Classes
    4. Standardized attributes

    These four things define HTML, and knowing how to use them is integral to creating any webpage.

    Standardized tag names

    Earlier we used things like `bike`, `wheel`, or `clown` as tag names. This is because in XML anything can be a tag name. In HTML however we are restricted to a specific set. A browser won't necessarily complain if you use a tag you made up, but it could result in unexpected behavior. For instance, if you right click and select "inspect element" on `this`, you'll notice it's a <c> tag, which is non-standard and you should definitely not do unless you're lazy like me. More importantly, don't do it without knowing the ramifications of making up your own. For now stick to the standard tags:

    • Headers

      `h1`, `h2`, `h3`, `h4`, `h5`, `h6` Good for larger text elements that label a section of a page
    • Paragraph element

      `p` Good for large paragraphs of text
    • Table elements

      `table`, `tbody`, `thead`, `tr`, `th`, `td` These elements allow you to create tables in HTML, like so:
      Tag name Description
      <table> The outer wrapper of a table. Without this table elements wont work.
      <thead> The header row of a table.
      <tbody> The main content of the table that's not the header.
      <tr> A row in a table
      <th> A highlighted or header cell of a table.
      <td> A normal, standard table cell.
    • List elements

      `ul`, `ol`, `li` These elements allow you to create tables in HTML, like so:
      Tag name Description
      <ul>

      Unordered List

      • Used
      • For
      • Making
      • Unordered
      • Lists
      <ol>

      Ordered List

      1. Used
      2. For
      3. Making
      4. Ordered
      5. Lists
      <li> An item in a list. Will always have a parent of <ul> or <ol>.
    • Divs

      divs are used for freggin' everything. They're the default element and can be used for anything. Technically stands for 'division', but really is just a generic container at this point. When in doubt, use a div.

    IDs

    The `id` attribute is used to idenitify a unique element. ids are limited to one id per element. It is useful to identify specific elements so that you can manipulate them in CSS or javascript. They are commonly used to identify major components of a page, for example:

    <div id="header">
      <h1> Really cool blog
    </div>
    
    <div id="sidebar">
      <ul>
        <li> Blog </li>
        <li> Gallery <li>
      </ul>
    </div>
    
    <div id="content">
      <p> Welcome to my blog!</p>
    </div>
    
    <div id="footer">
      <span> Contact Me </span>
      <span> Disclaimer </span>
    

    Classes

    The `class` attribute is also used to identify elements that share things in common, instead of unique elements in the case of `id`. Unlike `id` you can have multiple classes to each element. For example, you can use classes to indicate the style and purpose of various buttons. In this case the `button` class on its own indicates the default style and purpose.

    <div class="button "></div>
    <div class="button help"></div>
    <div class="button warning"></div>
    <div class="button disable"></div>
    

    Exercises

    1. Inspect several elements on this page

      To do so, simply right click and select `inspect element`. Try and guess what the tag will be before the inspector shows you.

    2. Distinguishing between id and class

      Look at this incomplete code below and determine whether class or id should be used in the places marked with `?`.

    <div ?="rose">
      <div ?="petals"></div>
      <div ?="thorns"></div>
      <div ?="leaves"></div>
    </div>
    
    <div ?="cedar">
      <div ?="bark"></div>
      <div ?="leaves"></div>
    </div>
    
    <div ?="cactus">
      <div ?="thorns"></div>
      <div ?="leaves"></div>
    </div>
    
    <div id="rose">
      <div class="petals"></div>
      <div class="thorns"></div>
      <div class="leaves"></div>
    </div>
    
    <div id="cedar">
      <div class="bark"></div>
      <div class="leaves"></div>
    </div>
    
    <div id="cactus">
      <div class="thorns"></div>
      <div class="leaves"></div>
    </div>