Tech Novice Tools

Web programming is a blast!

JavaScript is required on this site.

To fully utilize the power of this site,
enable JavaScript in your browser and try again.

What is HTML5?

Simply stated, HTML5 is a dialect (the newest!) of HTML which is the 'language' of the web. It stands for "Hyper Text Markup Language."

It informs a browser how to 'markup' the various structural components contained in the page such as paragraphs, hyperlinks, headings, articles, asides, etc.

These elements are contained in 'tags' (the < and > symbols) and usually flank content like bookends. (See the code in the orange panel to the right).

To see the 'source code' of virtually any web page, you can use the 'View Source' button from Chris Pederick's Web Developer Toolbar to see the underlying code. It's shocking at first, but eventually it will make perfect sense!

What is CSS?

Most modern pages are 'styled' with a language known as CSS, which may obscure or enhance the actual structure of the page. CSS provides the stylist aspects of the page, sort of like clothing on a department store mannequin. To see how a page looks in 'bare bones' format, CSS can be temporarily deactivated.

The 'Web Developer Toolbar' add-on mentioned earlier also gives the ability for a user to turn the CSS on and off to see what the HTML is doing all by itself, without the influence of CSS.

X-Ray Vision: Seeing the Underlying HTML5 Structure
of a Simple Web Page

If we want to see the structure of a web page within a web page (a bit of irony there) we need to use a trick to keep the browser from 'seeing' the code elements, This is done with the little-known 'xmp' tag.

Here is what the code above looks like after it's been rendered by the browser

Tag, You're it!

Sample HTML5 Code:

<!doctype html>  <html> <head> <title>Tech Novice Tools | Bare Bones HTML5</title> <link href="styles/basicStyles.css" rel="stylesheet" type="text/css"> <link href="styles/twoColumnDesignStyles.css" rel="stylesheet" type="text/css" media="screen"> <meta charset="utf-8"> <style> /*special page styles here*/ </style> </head> <body> <div id="stripe"> </div> <header> <h1><a href="index.php">Tech Novice Tools</a></h1> <h3>Web programming is a blast!</h3> </header> <div id="mainContent"> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="#" title="Coming Soon!">Helpful Links</a></li> </ul> </nav> <aside id="sidebar"> <h3>What is HTML5?</h3> <p> Light explanatory banter here</p> </aside> <section id="mainPanel"> <h3>X-Ray Vision: Seeing the underlying structure of a simple web page</h3> <p> Possibly more detail here </p> <article id="articleId"> </article> </section> </div> <footer> <p> <img src="images/HTML5Shield.png" alt="Validated HTML5!" width="64" height="64" id="html5Shield"> <img src="images/vcss-blue.gif" alt="CSS Validation" width="88" height="31" id="CSSShield"> </p> <p id="info"> TNT is an educational site serving as a 'sandbox' where teachers and students can field test programming designs in HTML5, CSS, JavaScript, PHP and mySQL. A bit of Java may be thrown in as well. Discover <a href="http://techtoolsgurus.com/" title="Visit the techtoolsgurus blogging page!">more</a> at our affiliated blogging site. All rights reserved. </p> </footer> </body> </html>

X-Ray Vision: Seeing the Underlying HTML5 Structureof a Simple Web Page

Tag, You're it!

Sample HTML5 Code:

X-Ray Vision: Seeing the Underlying HTML5 Structure
of a Simple Web Page