HTML Code Structure - dummies

By Lisa Lopuck

Everything that you see on a web page is held in place by a page-layout language called HTML (HyperText Markup Language). Since the time that HTML was first introduced, it has evolved from a simple way to display and link documents on multiple types of computers to its current capabilities, which include support for complex CSS page layouts, rich interactive media, and programming languages such as JavaScript and PHP. HTML essentially provides the structure of a web page.

A browser, such as Mozilla Firefox or Internet Explorer, interprets the HTML code and draws the nice-looking side of the page.

The first graphical web browser on the scene, introduced in 1993, was called Mosaic. This little program was an overnight success and, just one year later, evolved into Netscape under the code name “Mozilla.”

Within the browser window, HTML is sort of like the “man behind the curtain” in The Wizard of Oz, pulling off an amazing display of graphics, animation, and media, all without being seen. The HTML and CSS code behind any website you visit is accessible by selecting View→Source from your browser’s menu. It will pull up something that resembles the following figure.

[Credit: © Daimler Vehicle Innovations USA LLC ]
Credit: © Daimler Vehicle Innovations USA LLC

When you first take a look at a page’s HTML code, you may think that you’re looking at specs for a rocket launcher, but it’s really not that complex. HTML uses a system of tags, bits of code that define every type of element (from text blocks to links and images) on a web page. All these tags are marked by a set of opening (< >) and closing (</ >) characters. For example, the <a> HTML tag is the anchor tag used for linking to other pages or to parts of the current page. So, to make the text Click here to see our sales items into a link that goes to the page sales.html, you use opening and closing anchor tags as follows:

<a href=”sales.html”>Click here to see our sales items</a>

Notice how the opening anchor tag is not just a simple bracketed “a” like <a>. It has an attribute inside the brackets (href) that gives the browser more information. Because the <a> link can either go to another page or to a portion of the current page, you have to specify which location you have in mind. In this case, you want the link to go to another page, so you use the href attribute and give it a value of =“sales.html”.

You are not limited to just one attribute to help define an HTML tag. You can add a whole bunch of attributes and values in the opening tag.

Learning HTML is mainly about learning all the various tags and where they go in the code structure. If you can remember this much, you can get pretty far in your copying-and-pasting career. You can literally build web pages by copying and pasting tags from other pages and then modifying them slightly for your own purposes.