Hypertext markup language

Dr. Huidae Cho
Institute for Environmental and Spatial Analysis...University of North Georgia

1   What is the hypertext markup language (HTML)?

A markup language consists of the document content and its instructional elements that are typically not displayed to the end user.

HTML is the standard markup language for documents rendered in a web browser.

Cascading Style Sheets (CSS) and client-side scripting languages such as JavaScript can be used together with HTML to create web documents.

It was first proposed by Tim Berners-Lee in 1989.

It was influenced by a more extensible difficult-to-learn markup language called the Standard Generalized Markup Language (SGML).

2   History

VersionDateDescription
HTML 2November 24, 1995First HTML specification intended to be a standard by the HTML Working Group
HTML 3January 14, 1997Standardized by the World Wide Web Consortium (W3C); a markup for mathematical formulas was dropped in HTML 3.2
HTML 4December 18, 1997Published by the W3C; offers three document type definitions including
  • Strict: Forbids deprecated elements
  • Transitional: Allows deprecated elements
  • Frameset: Allows “mostly only frame-related elements”
HTML 5October 28, 2014Published by the W3C; enriches and promotes semantic elements over non-semantic ones

3   Web technologies

  • HTML for structure
  • CSS for style
  • JavaScript for behavior

4   Basic structure

<!DOCTYPE html><!-- declare the HTML document type -->
<html lang="en"><!-- specify a document language -->
<head><!-- metadata (data about data) goes here -->
<title>Hello World!</title>
</head><!-- most HTML tags must be closed by their closing tag -->
<body><!-- main document data goes here -->
<h1>My First HTML</h1>
Hello

   World!   <!-- HTML treats multiple whitespace characters
                 (space, tab, and newline) as one space except
                 inside a preformatted text element using <pre> -->
<pre>
Hello

   World!
</pre>
</body>
</html>

5   Main tags for this class

  • <h1><h6>: Level 1–6 headings
  • <div>: Block container
  • <span>: Inline container
  • <a>: Hyperlink
  • <p>: Paragraph
  • <ol>, <ul>, <li>: List
  • <table>, <tr>, <td>: Table
  • <img>: Image
  • <pre>: Preformatted text
  • <form>: Form for passing data to the server
  • <input>: Input field
  • <textarea>: Multiline text input

6   Check these websites