HTML

Semantic Markup

Web Typography Workshop @ Letterform Archive
Week 1

HyperText Markup Language

HTML is the language of web pages interpreted by web browsers.

  • HTML = HyperText Markup Language
  • HTML defines web content by organizing text comprised of a series of nested tags
  • HTML can be created with any simple text editor.

Layers of a webpage

LayerLanguage / File Type
contentHyperText Markup Language (HTML)
formCascading StyleSheets (CSS)
behaviorJavaScript (JS)

How it works

An .html file has 2 forms:

  1. As code, in your text editor. This is what you edit.
  2. As an webpage, in your browser. The browser reads HTML in a specific way.

HTML Tag

Tags are used to mark-up content in HTML. The tag name is between two angled brackets.

<p>
A paragraph tag

Anatomy

  • Left-Angle Bracket <
  • Tag name p
  • Right-Angle Bracket >

HTML Element

All content is surrounded between opening and closing tags. A closing tag is indicated with a forward slash /. Most forms of markup require both. (Here’s what happens when you don’t close tags.) A set of opening and closing tags form an html element. (Some special tags don’t require closing tags.)

<h1>headline</h1> <p>lorem ipsum ...</p>

Anatomy

  • opening tag <h1>
  • content headline — this is the actual text that will display
  • closing tag </h1>

Nested Structures

HTML works by wrapping text in opening and closing tags to indicate the role of the text to the browser. Often, elements are grouped together, constructing a hierarchy of elements nesting within each other. The foundational HTML structure is as follows


<!DOCTYPE html>
<html>
<head>
	<title>Sample File</title>
	<meta charset="utf-8">
</head>
<body>

	This is where all website content goes. 
	You can use whatever HTML elements make sense within the body tag, 
	but these other tags are required for a webpage to properly function.

</body>
</html>

Some elements that go in the head of a webpage

meta charset What encoding to use. Unicode is most common. "utf-8"
title The title of the webpage — what shows up in the tab of your browser, and shows up on a search result page, for example. Title of Website
meta name="description" A summary of your webpage. This will help in search engine optimization content="Your page description"
link rel="stylesheet" The path to connect your stylesheet href="path/to/cssfile.css"
More on What's in the head? Metadata in HTML.

Semantic Markup

Semantic refers to how the elements relates to meaning in language or logic. Semantic markup establishes the hierarchy and structure of information. The latest version of html, html5, introduced several new elements (among other things) to improve how precisely a tag can describe the content it contains.

  • headings h1, h2, h3, h4, h5, h6
  • emphasis strong, em
  • paragraph p
  • lists ul, ol, dl
  • tables table, th, td
  • collapsed information summary, details
Read more on how Semantic Markup is important for Web Accessibility

The Inspector

You can see the HTML and structure of any webpage by opening your Inspector tool on your browser.

Inspect (⌘–Option–I or ⌘–Shift–C) displays the HTML structure and styles that the browser determined from the source file. You can also hover over elements to see what they correspond to on your screen. The inspector is your best tool when developing websites because it bridges the gap between your intentions with your code and how the browser renders it.

Element hierarchy

An element nested within another is called a child element. Conversely, an element containing another is called its parent. A child element must be closed before its parent element.

This is incorrect syntax:


<h2>French Bakery</h2>
<p>
	All goods must be eaten <em>today.
</p></em>
<ul>
	<li>Baguettes	
	<li>Croissants
	<li>Pastries</li>
</ul>

This is correct syntax:


<h2>French Bakery</h2>
<p>
	All goods must be eaten <em>today</em>.
</p>
<ul>
	<li>Baguettes</li>	
	<li>Croissants</li>
	<li>Pastries</li>
<ul>

Whitespace

All HTML elements flow from the top to the bottom. Any whitespace (tabs or spaces) within the HTML file will have no effect on the rendered markdown; rather, it is a tool for writing readable code.

When writing code, nested elements should be kept tabbed for readability: it will help you see visually align the opening and closing tags of elements.

Elements and Attributes

Attributes provide additional information about the contents of an element appear with the opening tag of an element. They consist of an attribute name and a attribute value. Each element type has its own appropriate attributes.

<a href="index.html">home</a>

Anatomy

  • opening tag <a (in this case, the anchor tag)
  • attribute name href (the location / path to where the link takes you)
  • equals sign =
  • attribute value "index.html"
    • values must be wrapped in quotation marks
  • content home (the text that the user clicks on)

Links

Local / Relative links

Other pages in your site

<a href="about.html">learn more</a>

Anchor links

Other locations within the same webpage

<a href="#up">go back up</a>

In another part of the page

<div id="#up"> </div>

Absolute links

Other webpages outside your site

<a href="https//www.google.com/">search stuff</a>

Download links

Any non-html file for users to download

<a href="docs/resume.pdf">view a PDF</a>

Inline vs. Block elements

There are two primary display formats for elements.

These are default display CSS properties for each element.

We often use the generic <span> and <div> tags to wrap relevant elements, then assign additional CSS classes for formatting.

  • to target in-line elements, such as text, we wrap them in a span
  • to group several elements together, we wrap them in a div
Inline elements are continuous with the text flow

An inline element continues along the same line as its neighboring elements and occupies as much space (width) as its content. i.e.: <a>, <b>, <em>, <img>, and <span>.

Text before and after a block element
will be broken into separate lines

A block element always appears on a new line; by default, it’s as wide as its parent (containing) elements i.e.<section>,<article>, <h1>, <p>, <ul>, <li>, and <div>.

A list of common HTML elements

Basic elements

<html> ... </html>

Document metadata

<head> ... </head>
<title> ... </title>

Content sectioning

<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<section> ... </section>
<footer> ... </footer>
<h1> ... </h1>
<h2> ... </h2>

Text content

<ul> ... </ul>
<li> ... </li>
<p> ... </p>
<br />*

Flow content

<img />*

Inline text semantics

<em> ... </em>
<strong> ... </strong>
* these elements are self-closing and do not have opening/closing tag pairs.
You may see them with or without the closing /

Reference

A comprehensive list of HTML Elements

Exercise: Semantic Markup

Create an HTML file and markup your text, experimenting with different tags. Observe how inline and block elements work, as well as the default formatting your browser applies to certaint tags.

  1. Create a new folder in your own repository.
  2. Copy the contents of the 02-semantic-markup folder into it.
  3. Markup your chosen text, or choose one of the texts from the texts folder to markup.
  4. See how much you can design using only HTML markup and browser defaults.

HTML Troubleshooting

Below are some common errors to watch out for when writing HTML

  • Are your HTML elements wrapped in open and close tags?
  • Are your HTML elements properly nested?
  • Do your attribute values have matching quotation marks around them?
  • Are your directory paths correct? Double check your link / path syntax.