This article introduce the Hypertext Markup Language (HTML).

Web Developer Roadmap

Refer to Web Developer Roadmap:

Introduction:

Frontend Roadmap:

Back-end Roadmap:

DevOps Roadmap:

HTML

HTML Overview

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a webserver or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> introduce content into the page directly. Others such as <p>...</p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript which affect the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

HTML Standards

The latest version of HTML can be found here.

• HTML 2.0

  HTML 2.0 was published as IETF RFC 1866 on November 24, 1995. Supplemental RFCs added capabilities:

  • RFC 1867: form-based file upload, on November 25, 1995
  • RFC 1942: tables, in May 1996
  • RFC 1980: client-side image maps, in August 1996
  • RFC 2070: internationalization, in January 1997

• HTML 3.2

  HTML 3.2 was published as a W3C Recommendation on January 14, 1997. It was the first version developed and standardized exclusively by the W3C, as the IETF had closed its HTML Working Group on September 12, 1996.

  Initially code-named Wilbur, HTML 3.2 dropped math formulas entirely, reconciled overlap among various proprietary extensions and adopted most of Netscape’s visual markup tags. Netscape’s blink element and Microsoft’s marquee element were omitted due to a mutual agreement between the two companies. A markup for mathematical formulas similar to that in HTML was not standardized until 14 months later in MathML.

• HTML 4.0

  HTML 4.0 was published as a W3C Recommendation on December 18, 1997. It offers three variations:

  • Strict, in which deprecated elements are forbidden
  • Transitional, in which deprecated elements are allowed
  • Frameset, in which mostly only frame related elements are allowed.

  Initially code-named Cougar, HTML 4.0 adopted many browser-specific element types and attributes, but at the same time sought to phase out Netscape’s visual markup features by marking them as deprecated in favor of style sheets. HTML 4 is an SGML application conforming to ISO 8879 – SGML.

  HTML 4.0 was reissued with minor edits without incrementing the version number on April 24, 1998.

• HTML 4.01

  HTML 4.01 was published as a W3C Recommendation on December 24, 1999. It offers the same three variations as HTML 4.0 and its last errata were published on May 12, 2001.

  ISO/IEC 15445:2000 (ISO HTML, based on HTML 4.01 Strict) was published as an ISO/IEC international standard. In the ISO, this standard falls in the domain of the ISO/IEC JTC1/SC34 (ISO/IEC Joint Technical Committee 1, Subcommittee 34 – Document description and processing languages).

  After HTML 4.01, there was no new version of HTML for many years as development of the parallel, XML-based language XHTML occupied the W3C’s HTML Working Group through the early and mid-2000s.

• HTML 5.0

  HTML5.0 was published as a W3C Recommendation on October 28, 2014.

• HTML 5.1

  HTML 5.1 was published as a W3C Recommendation on November 1, 2016.

HTML Syntax

HTML Document Structure

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <h1>Sample page</h1>
    <p>This is a <a href="demo.html">simple</a> sample.</p>
    <!-- this is a comment -->
  </body>
</html>

HTML documents consist of a tree of elements and text.

Each element is denoted in the source by a start tag, such as <body>, and an end tag, such as </body>. Tags have to be nested such that elements are all completely within each other, without overlapping.

<p>This <em>is <strong>correct</strong>.</em></p>

Elements can have attributes, which control how the elements work. Attributes are placed inside the start tag, and consist of a name and a value, separated by an = character. The attribute value can remain unquoted if it doesn’t contain space characters or any of " ' ` = < >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the = character, can be omitted altogether if the value is the empty string.

<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">

<!-- attributes with a value -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
<input name=address maxlength="200">

HTML user agents (e.g., Web browsers) then parse this markup, turning it into a Document Object Model (DOM) tree. A DOM tree is an in-memory representation of a document. DOM trees contain several kinds of nodes, in particular a DocumentType node, Element nodes, Text nodes, Comment nodes, and in some cases ProcessingInstruction nodes.

The root element of this tree is the <html> element, which is the element always found at the root of HTML documents. It contains two elements, <head> and <body>, as well as a Text node between them.

HTML Tags

Refer to HTML Element Reference and HTML References on W3Schools.

Basic HTML

Formatting

Forms and Input

Frames

Images

Audio / Video

Links

Lists

Tables

Styles and Semantics

Meta Info

Programming

HTML Global Attributes

HTML attributes give elements meaning and context. The global attributes below can be used on any HTML element.

HTML Global Events

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. Below are the global event attributes that can be added to HTML elements to define event actions.

Window Event Attributes

Events triggered for the window object (applies to the <body> tag):

Form Events

Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):

Keyboard Events

Mouse Events

Events triggered by a mouse, or similar user actions:

Clipboard Events

Media Events

Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>). Refer to HTML Audio and Video DOM Reference for more information.

Misc Events

Cascading Style Sheets (CSS)

CSS Overview

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

CSS is designed primarily to enable the separation of document content from document presentation, including aspects such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

Separation of formatting and content makes it possible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. It can also display the web page differently depending on the screen size or viewing device. Readers can also specify a different style sheet, such as a CSS file stored on their own computer, to override the one the author specified.

CSS Standards

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents, refer to CSS Validation Service on W3C.

• CSS Level 1

  CSS Level 1 is published on December 17, 1996, revised on April 11, 2008. The W3C no longer maintains the CSS 1 Recommendation.

• CSS Level 2

  CSS Level 2 was developed by the W3C and published as a recommendation in May 1998. A superset of CSS 1, CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets (which were later replaced by the CSS 3 speech modules) and bidirectional text, and new font properties such as shadows. The W3C no longer maintains the CSS 2 recommendation.

• CSS Level 2 Revision 1

  CSS Level 2 Revision 1 often referred to as CSS 2.1, fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already implemented browser extensions to the specification. CSS 2.1 went to Proposed Recommendation on 12 April 2011. After being reviewed by the W3C Advisory Committee, it was finally published as a W3C Recommendation on 7 June 2011. CSS 2.1 was planned as the first and final revision of level 2 - but low priority work on CSS 2.2 began in 2015.

• CSS Level 3

  Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called modules. Each module adds new capabilities or extends features defined in CSS 2, preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999.

  Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group, and four of these have been published as formal recommendations:

  • 2012-06-19: Media Queries
  • 2011-09-29: Namespaces
  • 2011-09-29: Selectors Level 3
  • 2011-06-07: Color

  Some modules have Candidate Recommendation (CR) status and are considered moderately stable. At CR stage, implementations are advised to drop vendor prefixes.

• CSS Level 4

  There is no single, integrated CSS 4 specification, because it is split into separate modules. However, there are CSS level 4 modules.

  Because CSS 3 split the CSS language’s definition into modules, the modules have been allowed to level independently. Most modules are level 3 - they build on things from CSS 2.1.

CSS Syntax

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. Refer to CSS Tutorial on W3Schools.

CSS Structure

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

Selector

In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself. Selectors may apply to:

• all elements of a specific type, e.g. the top-level headers h1

• elements specified by attribute, in particular:

  • id: an identifier unique within the document
  • class: an identifier that can annotate multiple elements in a document

• elements depending on how they are placed relative to others in the document tree

The element Selector

The element selector selects elements based on the element name. Such as, select all <p> elements on a page like this:

p {
    text-align: center;
    color: red;
}

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element. Such as, the style rule below will be applied to the HTML element with id="para1":

#para1 {
    text-align: center;
    color: red;
}

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class. Such as, all HTML elements with class="center" will be red and center-aligned:

.center {
    text-align: center;
    color: red;
}

Or, specify that only specific HTML elements should be affected by a class. Such as, only <p> elements with class="center" will be center-aligned:

p.center {
    text-align: center;
    color: red;
}

Grouping Selectors

If you have elements with the same style definitions, it will be better to group the selectors, to minimize the code:

h1, h2, p {
    text-align: center;
    color: red;
}

Declaration Block

A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.

Properties are specified in the CSS standard. Each property has a set of possible values. Some properties can affect any type of element, and others apply only to particular groups of elements.

CSS Comments

A CSS comment starts with /* and ends with */.

 p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External style sheet
• Internal style sheet
• Inline style

Note: If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file.

Each page must include a reference to the external style sheet file named with a .css extension inside the <link> element. The <link> element goes inside the <head> section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<head>
  <style>
    body {
        background-color: linen;
    }

    h1 {
        color: maroon;
        margin-left: 40px;
    }
  </style>
</head>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. The example below shows how to change the color and the left margin of a <h1> element:

 <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

JavaScript

JavaScript Overview

JavaScript, often abbreviated as JS, is a high-level, dynamic, untyped, and interpreted run-time language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production; the majority of websites employ it, and all modern Web browsers support it without the need for plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.

Although there are strong outward similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two are distinct languages and differ greatly in their design. JavaScript was influenced by programming languages such as Self and Scheme.

JavaScript is also used in environments that are not Web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side Web applications. On the client side, developers have traditionally implemented JavaScript as an interpreted language, but more recent browsers perform just-in-time compilation. Programmers also use JavaScript in video-game development, in crafting desktop and mobile applications, and in server-side network programming with run-time environments such as Node.js.

JavaScript Standards

JavaScript was initially developed in 1996 for use in the Netscape Navigator Web browser. In the same year Microsoft released an implementation for Internet Explorer. This implementation was called JScript due to trademark issues. In 1997 the first standardized version of the language was released under the name ECMAScript in the first edition of the ECMA-262 standard. The explicit versioning and opt-in of language features was Mozilla-specific and has been removed. Firefox 4 was the last version which referred to a JavaScript version (1.8.5). With new editions of the ECMA-262 standard, JavaScript language features are now often mentioned with their initial definition in the ECMA-262 editions.

Also refer to ECMAScript Editions:

JavaScript Syntax

Refer to JavaScript Tutorial and JavaScript Reference on W3Schools.

What JavaScript can do include:

• JavaScript can change HTML content.
• JavaScript can change HTML attributes.
• JavaScript can change HTML styles (CSS).
• JavaScript can show or hide HTML elements.

JavaScript Structure

In HTML, JavaScript code must be inserted between <script> and </script> tags:

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Old JavaScript examples may use a type attribute: <script type="text/javascript">. The type attribute is not required. JavaScript is the default scripting language in HTML.

JavaScript can also be placed in external files which have extension .js, such as myScript.js:

function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}

External JavaScript

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

You can place an external script reference in <head> or <body> as you like. The script will behave as if it was located exactly where the <script> tag is located.

JavaScript Keywords

JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

JavaScript Comments

Single line comments start with //. Any text between // and the end of the line will be ignored by JavaScript (will not be executed).

Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript.

JavaScript Operators

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic on numbers:

JavaScript Assignment Operators

Assignment operators assign values to JavaScript variables:

JavaScript String Operators

The + operator can also be used to add (concatenate) strings:

txt1 = "What a very ";
txt1 += "nice day";

Adding Strings and Numbers

Adding two numbers, will return the sum, but adding a number and a string will return a string:

z = "Hello" + 5;

JavaScript Comparison Operators

JavaScript Logical Operators

JavaScript Type Operators

JavaScript Bitwise Operators

Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.

JavaScript Functions

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (), which may include parameter names separated by commas.

Function names can contain letters, digits, underscores, and dollar signs.

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {
    /* code to be executed */
}

The code inside the function will execute when something invokes (calls) the function:

• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)

Tools

Editors

HTML editors include:

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor

Some test editors are also used for HTML:

• Notepad++

Debug Tools

On Firefox, right click on web page and select “查看元素”, then you can check the elements of the current web pages.

References

• HTML on wikipedia
• World Wide Web Consortium (W3C)
• Latest version of HTML
• W3C Cheatsheet
• W3School
• SpyColor
• HTML 5 Test
• Web Browsers Scores on HTML 5 Test
• HTML 5 Introduction
• JavaScript Tutorial on W3Schools
• Web Developer Roadmap
• MDN Web Docs