wwworkshop

HTML Reference

Hypertext markup language is a way to give structure to some text or document. It let’s you define which part of a document is e.g. a headline or a hyperlink, but it can also provide the architecture for complex layouts. HTML is the underlying technology for almost all websites.

Syntax

<tag attribute="value">
  <!-- comment -->
  <tag>Content</tag>
  <selfclosingTag />
</tag>

Every HTML element is defined by a <tag>. They work like containers, can be opened <h1> have some content and later be closed </h1>. The resulting structure can be very flat or deeply nested.

There is another group of empty elements that are not allowed to have any content e.g. like <img />, <br /> or <hr />.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of my document</title>
  </head>
  <body>
    <!-- in this workshop as well as in CodePen, we only care about everything inside the body element -->
    <div>
      <h1>Headline</h1>
      <figure>
        <img src="image-1.jpg" alt="This is a nice image" />
        <figcaption>Here you can see this and that</figcaption>
      </figure>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <a href="next-article.html">Next article</a>
    </div>
  </body>
</html>

The indentation and all whitespaces between elements are ignored by the browser. But it is always a good practice to organize your code well to make it easier for yourself.

Common HTML tags

There is a wide variety of HTML tags that you can use to structure your content:

  • div a generic box that takes the whole width (block element)
  • span a generic box that is inline with the text (inline element)
  • h1, h2, … h6 headings of the hierarchy 1 to 6
  • p paragraph
  • strong to make something bold inside some text
  • em to emphasise something inside some text (italic)
  • a anchor or hyperlink to link to another page
  • img to insert an image
  • button to trigger some action
  • br line break
  • ol an ordered list
  • ul an unordered list
  • li a list element inside a list

Many of those elements have a semantic meaning to the browser and also have different default CSS styles.

There are also semantic elements like main, header, footer, section, aside, figure which work exactly like div elements, but can provide a more semantic structure that divs.

Attributes

Attributes give more details and functionality to elements, that often tell the browser not only what kind of element this is, but also how it works.

There are optional attributes that can be added to any element.

Give this headline a target anchor (id) that can be jumped to:

<h1 id="chapter-1">Chapter 1</h1>
<a href="#chapter-1">Go to chapter 1</a>

Assign classes in order to select them with CSS or JS

<div class="grid">
  <div class="grid-item very-interesting">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item not-interesting">Item</div>
  <div class="grid-item">Item</div>
</div>

Shows a small tooltip when hovering this button:

<button title="Click here to print this page">Print</button>

And there are specific attributes that belong to certain elements.

Define an image source url url and an alt-text that can be shown if the image fails to load:

<img src="image-1.jpg" alt="My image" />

Define a link pointing to another website:

<a href="next-article.html">Read more</a>
<a href="https://google.com" target="_blank" external>Read more</a>

Resolving problems

It is very usual to regularly run into errors when writing HTML, so don’t worry. These are common reasons:

  • Unclosed elements
  • Badly nested elements like <p>Lorem <em>ipsum</p></em>
  • Incorrect tag syntax like <p class="centered>Text</p>

Find out more:

Further surfing

Basics of HTML by Laurel Schwulst (14:23min). In context of this workshop, don’t worry too much about those <!DOCTYPE html>, <html>, <head> and <body>-stuff.