Basics of HTML
HTML stands for ‘HyperText Markup Language’ and it’s the lingua franca of the web. Nearly every page you’ve ever seen on the web is crafted from HTML code, excepting those built using Flash but even those are delivered inside an HTML shell.
Many users on the web have been creating blogs using tools like WordPress, Drupal, Joomla, etc. and have been spared learning HTML by great graphic user interfaces like TinyMCE. However, to really master your content, you need to understand what’s happening ‘under the sheets’ so that you can make adjustments and add special formatting to set your work apart.
HTML is over twenty years old and is currently transitioning from version 4 to 5. For the purposes of this article I’ll only be discussing HTML 4 and will offer some hints about HTML 5 and its improvements.
Apple’s Hypercard program in 1980 set the stage for the invention of HTML but it was lacking in the ability to link to files on other computers. The web was just getting off the ground at that point and HTML’s creation is tied directly to the inventions that form the foundations of the web we know and rely on today.
Tim Berners-Lee, starting with SGML (Standard Generalized Mark-up Language), devised a language that was independent of the tool that viewed it. The inherent simplicity of HTML is what made it such a hit and why it was adopted so swiftly and widely. One of the new elements Berners-Lee devised was the anchor tag – the ‘link’ functionality that allowed authors to ‘hyperlink’ to other pages. This was the springboard to the future.
He defined a set of ‘tags’ that when placed into standard ASCII text gave commands to rendering programs (browsers) to generate headers, paragraphs, bulleted and numbered lists, tables, etc. Here’s the basic tags that users really need to know (loosely organized by function):
| h1 – 6 | Headers. H1 largest. Secondary function – highlight information for Search Engine Optimization. |
| p | Paragraph. Line height, leading and trailing margins can be assigned using Cascading Style Sheets (CSS) |
| ul (and li) | Unordered List. Bulleted lists for arbitrarily-ordered items. |
| ol (and li) | Ordered List. Numbered lists for sequentially-organized items. Numerous numbering schemes available including lettered and roman numerals. |
| blockquote | Block quote. Indentation for quotes or highlighted material. |
| br | Line break. Carriage return – no extra space as in end of paragraph. Used to force content onto new line. Also can have special uses with CSS. |
| a | Anchor. Linked item – can be text or image. JavaScript commands can also be triggered using this block element. Anchors are often combined with unordered lists and CSS formatting to create navigation structures. Anchors can also point to specific locations within a page. |
| div | Division. A segment of a document. Divs can be given specific ids and used to apply visual formatting from CSS. These replaced tables in design methodology. |
| hr | Horizontal rule. A non-graphic line. Thickness and width can be set. |
| i | Italic. Current standard calls for ’em’ for ’emphasis.’ |
| b | Bold. Current standard calls for ‘strong.’ |
| img | Image. Images can be sized and made clickable to display a larger image (thumbnails). Images can also be links to other pages. |
| pre | Allows preformatted text to be displayed as-is (for example for code segments or free-form poetry) |
| table (and th and td) | Table. Tabulated (rows and columns) data. Table headers can be called out with th tags and table data (cells) make up the bulk of a table. In early years of web design tables were used to structure pages. This has been supplanted by CSS-based design using divs. |
| span | Span from arbitrary location to location. Used to apply custom formatting inline. |
| sub / sup | Subscript and Superscript. For inserting references. |
I’ve purposely omitted tags for creating forms since there’s many tools for creating them and even a brief discussion of them is prohibitive here. Suffice to say forms open a whole new door into interactivity and require skills not usually considered ‘basic.’
So, as you can see, the ‘rock bottom’ basics of HTML are indeed very basic. The artistry comes in how you combine the elements. Also, the serious bang comes from Cascading Style Sheets – but that’s another article!
Cheers!
