Core 1: Interaction

HyperText Markup Language (HTML)

On this page

HTML is the standard markup language/format for creating web pages, containing the content and structure of a page as a series of tags/elements.

HTML is the skeleton of the web. At its most basic it is a text file, in a folder on a computer, with a .html extension.

The basic document

HTML consists of a range of elements, nested inside one another.

As a visual:

As code:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

The <html> element contains all elements of the page, the <head> element contains the title, and the body contains <h1> and <p>.

We call these semantic elements—which is saying that they give their contents a meaning or a role. These roles are then interpreted by your browser (Chrome, Safari, Firefox, etc.) when it loads the file, to ultimately display the page. We call this parsing the document.

In our example, here is what we’ve told the computer:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

What are elements?

Elements are composed of tags (opening, closing) and their content:

Some elements do not have any content or children, like <br> or <img>. These are called empty elements and do not have a closing tag.

Common elements

<h1>There should only be one first-level heading!</h1>

<p>You should always wrap your text in a paragraph!</p>

<a href="https://www.example.com">Links need attributes!</a>

The href (Hypertext REFerence) specifies a URL that the link points to, and the tag wraps the visible link text. The href can point to another, local HTML file (living in the same directory structure) or an external page. They can also point to specific parts of a page.

<img src="example.jpg" alt="Images should have descriptions!">

The src can point to a local image file or an external URL! alt provides a description for accessibility/screen readers.

These are the structural containers of a website. The names don’t imbue meaning or function directly, but help us organize and think about our content structure. (And again, are helpful for accessibility.)

<body>
  <header>
    <!-- A header. -->
  </header>

  <main>
    <!-- Your main content. -->
  </main>

  <footer>
    <!-- The footer. -->
  </footer>
</body>

<p>You may have noticed I like using <em>emphasis</em>.</p>

<ul>
  <li><!-- A list item. --></li>
  <li><!-- Another. --></li>
  <li><!-- A third. --></li>
</ul>

Attributes

All HTML elements can have attributes, which provide more information about the element:

Common attributes

<a href="https://www.example.com">Goes to example.com</a>

<img src="example.jpg">

<img src="example.jpg" alt="A description of the image.">

<h2 id="a-heading-element">A heading element</h2>

<a href="#a-heading-element">Goes to "a heading element"</a>

<p class="warning">We'll get into this soon.</p>

Block elements

Block-level elements always start on a new line, and take up the full width available—stretching out to the left and right of their parent/container. They stack on top of each other. Importantly, block elements can have a top and bottom margin, unlike inline elements.

Earlier, we talked about area-defining elements. All of these area-defining elements are also block elements:

<header> <footer> <nav> <main> <section> <div>

The heading elements (<h1>, etc.), and <p> tags are also block-level.

All of the above, in typical use:

<!DOCTYPE html>
<html>

  <head>
    <title>Block elements</title>
  </head>

  <body>

    <header>
      <h1>My Website</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </nav>
    </header>

    <section id="about">
      <h2>About Me</h2>
      <p>I am a designer currently studying at Parsons.</p>
    </section>

    <footer>
      <a href="https://my-instagram-link">Instagram</a>
      <a href="/contact">Contact Me</a>
    </footer>

  </body>

</html>

As said earlier in the lecture, HTML is the skeleton and content of the page. It won’t look like much without CSS.

Inline elements

Inline elements do not start on a new line, and only take up as much width as necessary. I like to think of these as the little metal slugs from printing. Other text and inline elements will continue to flow around them, and they can wrap to new lines:

<a> <em> <img> <span>

Inline elements often exist within block elements:

<p>
  This is a <a href="https://www.example.com">link</a> to an <em>important</em> website.
</p>
<div>
  <img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" alt="Example Image">
</div>
<p>
  This is a <em>styled</em> <span class="blue-text">test</span> element.
</p>

Comments

You can comment part of the code and the browser won’t show it. Comments are often used to explain your thinking, organize your code, “turn off” a bit of code, or hide whatever you’d like:

<!-- this is a comment in HTML that will not appear on the page -->

<!--
  You can also make
  a multi-line comment
  like this.
  -->

Keep in mind comments are still readable in your source code, so don’t put any secrets in there. Nearly every programming language allows comments.

I highly recommend getting into a habit of commenting your code, especially when starting out. If you figure something tricky out, write down why and how you solved it to help you understand and remember. And you’ll often come back to things. Commenting your code is a gift to your future self!