I just had to take the hypertext idea and connect it to the TCP and DNS ideas and – ta-da! – the World Wide Web.

HTML History

• The Hypertext Markup Language (HTML) was present in the document sharing system that Berners-Lee developed at CERN in the early 1990’s.
• The HTML Working Group, created by the IETF, released HTML 2.0 as a standard in 1995, and stated that it was the first HTML specification intended to be treated as a standard against which future implementations should be based.
• Since then, additional versions of this standard have been created under the auspices of the W3C.
• HTML5 incorporates new features such as video playback and drag-and-drop capabilities.

Sematic HTML

There is a design principle related to publishing entitled separation of content and presentation — the meaning (i.e., semantics) of a document should be separated from how this meaning is presented to readers.

Advantages associated with using this design principle:

• – The same content can be rendered differently, depending upon the needs of the user (e.g., as text, as braille, etc.).
• – You can change in one place how a recurrent item in the document is styled (e.g., section headings), and the change will be reflected throughout the entire document. Indeed, the entire graphic design of a document can be updated/changed in this way.
• – By capturing the meaning of a document, further intelligent machine processing of the document is supported. E.g., give me all of the emphasized words in a document, all of the level one headings, etc.

Declarative Programming

Markup languages are examples of declarative programming languages:

• – Program flow control is not specified.
• – Programs specify what not how

In the case of markup languages such as HTML, this means that you specify what should appear on a webpage, but not how it should look (i.e., how it’s styled) or behave (e.g., when it’s visible, animations).

If created properly, HTML documents should follow the separation of content and presentation principle.
Example: HTML –

<div>
  <h1> Introduction </h1>
</div>

HTML - Elements, Tags and Attributes

Each individual component in an HTML document is represented by an HTML element.

An HTML document is structured as a tree of elements.

An HTML element consists of

1. A start tag that must contain the element's name, and may also contain additional attributes.
2. An end tag that matches the name provided in the start tag.
3. The content that may appear between the start and end tags.

Example:

<div id="main-panel">
  <h1> Introduction </h1>
</div>

Elements may appear nested inside of other elements.
Example:

<div id="main-panel">
  <h1> Introduction </h1>
  <h2> Introduction </h2>
</div>

The h1 and h2 elements are nested inside the div element , so h1 and h2 are the children of div , and div is the parent of h1 and h2.

These parent-child relationships lead to the tree structure of HTML documents.

Note: A listing of all available HTML tags can be found at:www.w3schools.com/tags/

Attributes give elements additional meaning and context.

Attributes appear as a list of name-value pairs inside the start tag, where the value must be enclosed in quotes, and the name and value are separated by an equal sign.
Example:

<div id="main-panel" class="modern">
  <h1> Introduction </h1>
</div>

All HTML elements support the id attribute (i.e., it’s a global attribute). An id must be unique within an HTML document.

Another global attribute is class, which can be applied to a collection of elements.

One of the most important HTML elements is the anchor, <a> . It is used to create hyperlinks.
Example:

<a href='http://www.amazon.com'>Amazon </a>

The href attribute is used to specify the hypertext reference, i.e., the link. This will produce a link that looks something like Amazon.

Event attributes may be attached to an anchor element – a script is called when the event occurs. These may include window, form, keyboard, mouse or media events.
Example:

<a href='http://www.amazon.com' onmouseover='notice.js'>Amazon </a>

Styling HTML

In earlier versions of HTML, a number of formatting elements found their way into the specification. E.g., you could specify the font that should be using in a particular h1 heading.
Example:

<h1> 
  </font face='arial' size='20' color='#ffffff'>
    Introduction
  </font>
</h1>

This clearly breaks the separation of content and presentation principle.

This was recognized, and as a result a number of these types of tags are listed as “Not Supported in HTML5.” Instead, you are directed to use CSS.

Styling rules (CSS) and/or behaviours (JavaScript) are attached to particular HTML elements according their id and/or class.