UX Design and Development course

HTML

A hyper text markup language created to give content structure and meaning

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).

Tags

Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as <div>. Closing tags mark the end of an element and begin with a forward slash, such as </div>.

Example:

<div>, <p> and <ul>

Elements

Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and em.

Examples:

<h1></h1>

Attributes

Attributes are properties used to provide additional instruction to given elements. More commonly, attributes are used to assign an id, class, or title to an element, to give media elements a source (src), or to provide a hyperlink reference (href).

<a href="http://www.apple.com">Apple</a>
<div class=”foo”></div>

Data Attributes

Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:

Attribute Name

The data attribute name must be at least one character long and must be prefixed with data-. It should not contain any uppercase letters.

Attribute Value

The attribute value canUsing this syntax, we can add application data to our markup as shown below:

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

Structure and syntax

All HTML documents have a required structure that includes the following declaration and tags: doctype, html, head, and body.

The doctype declaration is used to instruct web browsers which version of HTML is being used and is placed at the very beginning of the HTML document.

The head of the document is used to outline any meta data, the document title, and links to any external files.

Any context included within the head tags is not visible within the actual web page itself.

All of the content visible within the web page will fall within the body tags.

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a website.</p>
    <script src="js/main.js"></script>
  </body>
</html>

Content structure

Defines the main or important content in the document. There is only one <main> element in the document.

<main> ... </main>

Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content.

<header> ... </header>

Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.

<footer> ... </footer>

Defines a section in a document, only just a little more semantic then a <div>

<section> ... </section>

Defines self-contained content that could exist independently of the rest of the content.

<article> ... </article>

Defines a section that contains only navigation links

<nav> ... </nav>

Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.

<aside> ... </aside>

HTML5 Element Index

This is a quick reference of elements that are new or have been redefined in HTML5. For each element there is a short description, a link to the specification, and a code example. “Our prognosis” links to the HTML5 Doctor article on the element. There are more articles in the Article Archive.

The index

HTML5 Sectioning Element Flowchart

An easy-to-understand HTML5 sectioning element flowchart to help you get to grips with some of the new elements in HTML5.

image

The DOM tree

A cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.

NOTE: The DOM tree is NOT view source

With the advent of JS MVVM frameworks and other DOM manipulators, much can happen after the fact that view source will not show.

To render a document such as an HTML page, most web browsers use an internal model similar to the DOM.

The nodes of every document are organized in a tree structure, called the DOM tree, with topmost node named "Document object".

When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.

The DOM is also the way JavaScript transmits the state of the browser in HTML pages.

Web browsers rely on layout engines to parse HTML into a DOM.

  • Trident/MSHTML == MS IE
  • Gecko == Mozilla/Firefox
  • Webkit == Safari/iOS
  • Blink == Chrome and Opera