Introduction to HTML 5

From Knowledge Kitchen
Jump to navigation Jump to search


The history of hypertext

The popular concept of hypertext (documents that link to each other) predates the invention of the web by at least 44 years:

Bare minimum HTML code

Standard starting point for all HTML 5 projects.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Insert the title of your page here</title>
	<link rel="stylesheet" type="text/css" href="css/some_stylesheet.css" />
</head>
<body>
	Insert the contents of your page here. 
</body>
</html>

Elements vs. tags

  • HTML code is written to indicate the presence "elements" of a document, such as sections, articles, headings, images, paragraphs, etc.
  • Tags are the written code snippets that are used to represent elements.

Explicit opening and closing tags

Every element is represented by an explicit opening and closing tag, e.g.:

    <section>
    </section>

Any tags or content nested inside this element must be written between those opening and closing tags, e.g.:

    <section>
            Here I am!
    </section>


Implicit opening and closing in a single tag

A few elements will never have any other tags or content nested inside of them. These elements are written using a simpler syntax with a single "self-closing" tag, e.g.:

<br />
<meta charset="utf-8" />
<img src="images/foo.bar" />
<input type="checkbox" />

Nesting

If any given element is nested inside of any other element, the inner element should be indented one tab to the right of the outer element, e.g.:

    <section>
            <article>
            </article>
    </section>

Notice that the inner element must be closed by its closing tag before the outer element is closed by its closing tag. You might call this the "first in, last out" rule, or perhaps the "last in, first out" rule.

This same rule applies to all levels of nesting, e.g.:

    <body>
            <header>
                    <section>
                            <article>
                                    <h1>
                                            Here I am!
                                    </h1>
                            </article>
                    </section>
            </header>
    </body>

Common HTML tags

Tags to setup every HTML document:

  • html
  • head
  • body

Tags used for settings within the head:

  • title
  • meta
  • script
  • link
  • style

Tags used to indicate content within the body:

  • h1 - h6
  • a
  • p
  • br
  • strong
  • ul
  • ol
  • li
  • img
  • figure
  • figcaption
  • video
  • audio
  • source

Tags used to group content within the body:

  • header
  • footer
  • menu
  • nav
  • section
  • article
  • aside
  • div
  • span

Tags used in forms within the body:

  • form
  • input
  • textarea
  • label
  • select
  • option

Digital audio workstation software

There are a variety of tools that allow you to create and edit audio that can be included in web pages.

What links here