HTML

HTML (HyperText Markup Language) is used to lay out the structure of a webpage.

HTML is made up of tags.

  • Tags generally come in pairs, with data being in between the tags.
  • Tags are indented to help visualize their hierarchy, but any indentation is purely stylistic.
  • Tags can also have attributes, which are data fields, sometimes required and sometimes optional, that provide additional information to the browser about how to render the data.

We will explore some common tags below.

Basic structure

  • <!DOCTYPE html> is placed at the start of an HTML file to indicate to the browser that HTML5 is being used.
  • <html></html>: contents of website
  • <head></head>: metadata about the page that is useful for the browser when displaying the page
  • <title></title>: title of the page
  • <body></body>: body of the page
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Basic tags

Explore the CodePen below for basic HTML tags and their effect.

See the Pen HTML Basic tags by Ali Madooei (@madooei) on CodePen.

Lists

  • <ul></ul>: unordered list
  • <ol></ol>: ordered list
  • <li></li>: list item (must be inside either <ul></ul> or <ol></ol>)

See the Pen HTML List tags by Ali Madooei (@madooei) on CodePen.

  • <a href="path/to/hello.html">Click here!</a>: link to hello.html, some URL, or some other content marked by id by passing #id to href
  • <img src="path/to/img.jpg" height="200" width="300">: image stored at src attribute, which can also be a URL
    • note that this is a single tag without an end tag
    • both height and width are optional (if one is omitted, the browser will auto-size the image), and can also take a percentage: height=50% to automatically scale the image to a certain portion of the page

See the Pen HTML img tag by Ali Madooei (@madooei) on CodePen.

Table

  • <table></table> : table
  • <tr></tr>: table row (must be inside <table></table>)
  • <th></th>: table header (must be inside <td></td>)
  • <td></td>: table data (cell) (must be inside <td></td>)

See the Pen HTML table tag by Ali Madooei (@madooei) on CodePen.

Forms

You can create forms in HTML to collect data; we will explore this later. Here is a CodePen for illustration of some basic form tags:

See the Pen HTML Basic form tags by Ali Madooei (@madooei) on CodePen.

div and span

Two special tags allow us to break up a our webpage into sections:

  • <div></div>: vertical division of a webpage
  • <span></span>: section of a webpage inside, for example, text

Both <div></div> and <span></span> don't really do much by themselves, but they allow for the labelling of sections of a webpage.

Different sections of a webpage can be referenced with the id and class attributes. ids uniquely identify elements, but there can be an arbitrary number of elements with a given class.

DOM

The Document Object Model is a way to conceptualize webpages by representing them as an interconnected hierarchy of nodes. In HTML, the nodes of the DOM would be the different tags and their contained data, with the <html></html> tag being at the very top of the tree. While this might seem a little unintuitive at first, this model will become very useful in the future.

See the Pen HTML DOM by Ali Madooei (@madooei) on CodePen.

You will find a wealth of resources on HTML (and Web Development in general) at MDN Web Docs and W3School.