HTML Lecture

Ryan
The content for these notes is referenced from the W3 Consortium.

What is HTML?

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is not a programming language, it is a markup language
  • A markup language is a set of markup tags
  • HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

  • HTML documents describe web pages
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

 

HTML Elements

Basically an HTML document or website is a collection of elements that are organized hierarchically. The primary function of HTML is to identify different types of information and to communicate that information’s importance and relationships in the document.

Here is an example page and how the layout is broken down into single elements nested within other elements.

That same layout represented as nested boxes

An example visual layout

Each of these red boxes represents an HTML element. An element is just a chunk of content that is grouped together inside a pair of tags. These elements represent the entire range of objects permissible in HTML. Images, Headlines, Paragraphs, Links, Divisions, Spans, Text formatting and lots more. Here is a comprehensive reference list of HTML elements.

 

Block and Inline elements

The Elements are divided into 2 groups. Inline and Block. This distinction is important because each type has a few default display properties that are useful.

Block elements, by default, have no height, but will be as wide as their containing element will allow. Their height is generally determined by the content inside them. This means if you create several block elements in an HTML document, that they will appear under each other on the displayed page. A few of these elements also have additional formatting built in. For instance, all the P and H elements (paragraph and headlines) have padding on the top and bottom to create space before and after the text they contain. We’ll learn about padding in the CSS lesson next week.

These are Block elements

  • ADDRESS – Address
  • BLOCKQUOTE – Block quotation
  • DIV – Generic block-level container
  • FIELDSET – Form control group
  • FORM – Interactive form
  • H1 – Level-one heading
  • H2 – Level-two heading
  • H3 – Level-three heading
  • H4 – Level-four heading
  • H5 – Level-five heading
  • H6 – Level-six heading
  • HR – Horizontal rule
  • OL – Ordered list
  • P – Paragraph
  • PRE – Preformatted text
  • TABLE – Table
  • UL – Unordered list

Each of these words is contained inside a separate <h4> tag:

This

is

a

block

example.

and the code for that:
<h4>This</h4> <h4>is</h4> <h4>a</h4> <h4>block</h4> <h4>example.</h4>

The most used element of them all is <div>. Div stands for Division, and it’s basically a box container. Your main structure will be built out of divs primarily, only using other elements where their specific semantic purpose is required. Using CSS you can make a div be any height, width or position in your layout.

In addition to Block elements, there are Inline elements. Inline elements have no default width. It’s determined only by the content inside. This means that if you create several inline elements in an HTML document, that they will display next to each other, with the later ones appearing to the right of previous ones. These are typically used to denote a change in content semantics in a document. Basically saying “ok this one word should be italic” or “this number is a citation”. The most commonly used of these will be <img> and <span>.

These are Inline elements

  • A – Anchor
  • ABBR – Abbreviation
  • ACRONYM – Acronym
  • B – Bold text
  • BR – Line break
  • CITE – Citation
  • CODE – Computer code
  • EM – Emphasis
  • I – Italic text
  • IMG – Inline image
  • INPUT – Form input
  • LABEL – Form field label
  • Q – Short quotation
  • S – Strike-through text
  • SELECT – Option selector
  • SPAN – Generic inline container
  • STRIKE – Strike-through text
  • STRONG – Strong emphasis
  • SUB – Subscript
  • SUP – Superscript
  • TEXTAREA – Multi-line text input
  • U – Underlined text

Each of these words is contained inside a different inline element.

This is an inline example.

and the code for that:
<del>This</del> <span style="text-decoration: underline;">is</span> <q>an</q> <strong>inline</strong> <span>example.</span>

Span is one of the most generally handy as it has no default styles at all. It’s like a vanilla container that you can use in many situations. Behind that is the IMG tag, which is used to display images in your layout. The rest are primarily related to text.

 Element Attributes

  • HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes come in name/value pairs like: name=”value”

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

<a href="http://www.w3schools.com">This is a link</a>

Attributes Reference

A complete list of legal attributes for each HTML element is listed in our:

Complete HTML Reference

Below is a list of some attributes that are standard for most HTML elements:

Attribute

Value

Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title tooltip_text  Specifies extra information about an element (displayed as a tool tip)

For more information about standard attributes:

HTML Standard Attributes Reference

HTML document structure

<!DOCTYPE html>
<html>
<head>
<title>page title goes here</title>
</head>
<body>
visible document contents go here.
</body>