!-- (HTML comment) | !DOCTYPE | a | abbr | acronym | address | applet | area | b | base | basefont | bdo | big | blockquote | body | br | button | caption | center | cite | code | col | colgroup | dd | del | dfn | dir | div | dl | dt | em | fieldset | font | form | frame | frameset | h1 | h2 | h3 | h4 | h5 | h6 | head | hr | html | i | iframe | img | input | ins | isindex | kbd | label | legend | li | link | map | menu | meta | noframes | noscript | object | ol | optgroup | option | p | param | pre | q | s | samp | script | select | small | span | strike | strong | style | sub | sup | table | tbody | td | textarea | tfoot | th | thead | title | tr | tt | u | ul | var

HTML (HyperText Markup Language) is a non-proprietary format for structuring plain text documents so they can be presented on the Web. A pure HTML document is just a plain text file with an extension of .htm or .html. Typically a web server spits out HTML documents to be viewed by users with web browsers and some sort of connection to the web server. An HTML document presents information with text or objects that can lead to other information via links.

HTML history:

  • 1990: HTML (HyperText Markup Language) was specified by Tim Berners-Lee. He also wrote a browser and server for it.
  • 1995-11-24: HTML 2.0 published as IETF RFC 1866.
  • 1997-01: HTML 3.2 published as a W3C Recommendation. Sadly the math tags were dropped.
  • 1997-12: HTML 4.0 published as a W3C Recommendation. Includes three flavors: Strict, Transitional, and Frameset.
  • 1999-12: HTML 4.01 published as a W3C Recommendation.
  • 2000-01-26: XHTML 1.0 published as a W3C Recommendation. XHTML is a reformulation of HTML as an XML document.
  • 2000-05: ISO HTML (based on HTML 4.01 Strict) published as ISO/IEC 15445:2000.
  • 2001-05-31: XHTML 1.1 published as a W3C Recommendation.
  • 2008-01: HTML 5 and XHTML 5 published as a W3C Working Draft. See HTML5 differences from HTML4 [http://dev.w3.org/html5/html4-differences/]. The new elements are: section, article, main, aside, header, footer, nav, figure, figcaption, template, video, audio, track (for video), embed, mark, progress, meter, time, ruby, rt, rp, bdi, wbr, canvas, datalist (plus list attr for input), keygen, output. Obsoleted elements: basefont, big, center, font, strike, tt, frame, frameset, noframes, acronym (use abbr), applet (use object), isindex, dir (use ul)

See the latest version of the HTML specifications at http://www.w3.org. Their material ranges from technically easy to technically difficult.

HTML is a specific implementation of SGML (Standard Generalized Markup Language) for the WWW. XML (eXtensible Markup Language) is a more general implementation of SGML.

An HTML document basically takes plain text and applies special formatting by enclosing portions of it in markup tags (hence the "M" in HTML). The HTML document is also able to point to other files for presentation within the document or for access by clicking on the pointer (hence the "HT" in HTML). EG:

<p>This is text enclosed in paragraph tags.</p>
<p>This text has <b>bold words</b> in it.</p>
<p>This tag presents an image: <img src="hi.gif"></p>
<p>Here is a <a href="Hello.htm">clickable pointer</a>.</p>

HTML tags are also called HTML elements, especially when used the elements are used as objects for CSS or other processes. An element may belong to zero or more categories. Here are categories for the kind of content the element should have:

  • Metadata. base link meta noscript script style template title.
  • Flow. a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del details dfn dialog div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label link (if the itemprop attribute is present) main map mark math menu meta (if the itemprop attribute is present) meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table template textarea time u ul var video wbr text
  • Sectioning. article aside nav sectionarticle aside nav section. NOTE: Does not include: main header footer!
  • Heading. h1 h2 h3 h4 h5 h6.
  • Phrasing (the "text"). a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label link (if the itemprop attribute is present) map mark math meta (if the itemprop attribute is present) meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text
  • Embedded. audio canvas embed iframe img math object svg video
  • Interactive. a audio (if the controls attribute is present) button details embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the hidden state) keygen label object (if the usemap attribute is present) select textarea th (if used in sorting interface) video (if the controls attribute is present)
  • Paplable. a abbr address article aside audio (if the controls attribute is present) b bdi bdo blockquote button canvas cite code data details dfn div dl (if the element's children include at least one name-value group) em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header i iframe img input (if the type attribute is not in the hidden state) ins kbd keygen label main map mark math menu (if the type attribute is in the toolbar state) meter nav object ol (if the element's children include at least one li element) output p pre progress q ruby s samp section select small span strong sub sup svg table textarea time u ul (if the element's children include at least one li element) var video text (that is not inter-element whitespace)
  • Script-supporting. script template

A page usually contains 1 document with this basic structure:

<html>
<head>...</head>
<body>...</body>
</html>

However, a page may contain multiple documents. Hence each frame object is also a window object that contains 1 document object.

<html>
<head>...</head>
<frameset>
    <frame>...</frame>
    <frame>...</frame>
</frameste>
</body>
</html>

Here is a typical HTML document ca 2014 with an emphasis on the new HTML 5 elements:

<!DOCTYPE html><!-- Note the simpler DOCTYPE. -->
<html lang="en">
    <head>
        <meta charset="utf-8" /><!-- Yes, utf-8 rocks. -->
        <title>My Page</title>

        <!-- Almost all responsive web design pages use this: -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Note the protocol relative URLs below. -->

        <link rel="stylesheet" href="//foo.com/old.css" type="text/css">
        <link rel="stylesheet" href="//foo.com/new.css">
        <!-- Unpaired tags are now like <br> instead of <br /> -->

        <script src="//foo.com/old.js" type="text/javascript"></script>
        <script src="//foo.com/new.js"></script>
    </head>
    <body>
        <header>
            <!-- A header introduces a page or section. -->
            <!-- Stuff like logo, title, nav. -->

            <nav><!-- A nav has navigation links. --></nav>
        </header>
        <main role="main">
            <!-- There should only be one main on a page. -->
            <!-- Exclude content repeated elsewhere like nav, copyright, etc. -->
            <!-- Do not descend from article, aside, foooter, header, or nav. -->

            <nav><!-- A main may have its own nav. --></nav>

            <!-- There can be multiple sections. -->
            <!-- Sections organize content. -->
            <!-- Sections can contain articles and vice-versa. -->
            <section>
                <article>
                    <!-- An article is self-contained content. -->
                    <!-- An article may use older headers like h1, h2, etc. -->

                    <!-- Other HTML5 elements: -->
                    <figure>
                        <!-- An illustration. -->
                        <figcaption></figcaption>
                    </figure>
                    <mark><!-- Marks text for its relevance in another context. --></mark>
                    <meter><!-- A measurement. --></meter>
                    <progress><!-- Completion progress especially of a form. --></progress>
                    <time></time>
                </article>
            </section>
            <section>
                <aside>
                    <!-- Content loosely related to the page, section, article. -->
                    <!-- If removed, the remaining content still makes sense. -->
                </aside>
            </section>
            <section>
                <!-- Here are elements for embeded content: -->
                <audio src="">
                    <source><!-- Alt sources for audio, video, etc. --></source>
                </audio>
                <canvas><!-- A generated graphic. --></canvas>
                <embed src="" type="">
                <img src="" alt=""><!-- Pre HTML5. -->
                <iframe src="" frameborder="0"><!-- Pre HTML5. --></iframe>
                <math><!-- Pre HTML5. --></math>
                <object data="" type=""><!-- Pre HTML5. --></object>
                <param name="" value=""><!-- Pre HTML5. -->
                <svg><!-- Pre HTML5. --></svg>
                <video src="">
                    <track><!-- Timed text track for audio, video, etc. --></track>
                </video>
            </section>
        </main>
        <footer>
            <!-- Applies to a page or section. -->
            <!-- Stuff like copyright, legal, address. -->
            <address><!-- Pre HTML5. --></address>
        </footer>
    </body>
</html>


GeorgeHernandez.comSome rights reserved