Web Type


Demo files

HyperText Markup Language

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

An .html file has 2 forms:

  1. As code, in your text editor.
  2. As an webpage, in your browser.


Tags are used to mark-up content in HTML. It is always between two angled brackets.



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.)

<p>lorem ipsum ...</p>



Semantic Markup

Semantic: relating 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.

※ Clicking around on this site, you might notice that you’ll see the underlying HTML tags. But the best way to see this is to open up the Inspector.

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

Nested structures

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>
	All goods must be eaten <em>today.


These are examples of incorrect syntax:

<h2>French Bakery</h2>
	All goods must be eaten <em>today</em>.

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. Nested elements should be kept tabbed for readability: it will help you see where the opening and closing tags of elements.

Inline vs. Block elements

There are two primary display formats for elements.

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>.

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>.

These are default display CSS properties for each element.

We often use the generic <span> and <div> elements with CSS classes for formatting.

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 value. Each element type has appropriate attributes.

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



<a href="https://www.google.com/">Google</a>

Use it to link to:

A list of common HTML elements

Basic elements

<html> ... </html>

Document metadata

<head> ... </head>

<title> ... </title>

Content sectioning

<header> ... </header>

<nav> ... </nav>

<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 /