Lightning Fast
HTML Tag Tutorial

The Basics
and nothing but the basics

HTML Hello World


<html>
<head>
</head>
<body>
  Hello World
</body>
</html>

The above is a (or more properly is The definitive) bare bones HTML 'Hello World' file. Cut & Paste in a plain text file with an .html extension. And you've made HTML history. Crack a drink, open in your favourite browser, and celebrate. You are now a highly skilled web designer in much demand.

Please note:

<html>
</html>
The above makes the document html (that and saving it with a .html extension).

In theory, a person is supposed to provide html versioning information at the very top, but this information (being provided by smucks like you and me) is so notoriously unreliable that browsers no longer pay any attention to what's declared, thus making any declaration a waste of my (if not your) personal time. 

<head>
  <title>Browser Name</title>
  <style>
    pre {border: solid 2px black;}
  </style>
  <script>JavaScript</script>
</head>
Indenting is not required.

Title: is the name that will appear in browser tabs.

Style: is page wide css. Shown is the only entry I used for this page, which controls the code pre-formatted code boxes (the outlined boxes).

Script: is generally speaking JavaScript. No JavaScript was used in the making of this page. In my ever so humble opinion, JavaScript is way-way-way over-used in website design and presentation, as are SQL databases, frameworks, CMV's, and so on.

Of these three, I always use title, mostly use style and hardly ever use script. I am not a JavaScript person.

<body>
  Hello World
</body>
For the most, whatever is inserted in plain text between the body tags will be displayed in the browser.

The rest of this page describes the handful of tags that I use consistently in the body of an html page.


Basic HTML Tags

HTML ignores white space. Between every word typed, you get a single solitary space.

&nbsp;   =   adds a blank space
<br>       =   br ==> break ==> line return
&amp;    =   &
&lt;         =   <
&gt;        =   >
&#169;   =   ©, of utmost importance

This means to get <br> to display to screen, I needed to type &lt;br&gt; into the html text file and to get the columns to line up, there was extensive use of &nbsp; which means the above is nigh near incomprehensible to read down at the file level (and is one of the reasons why worrying too much about presentation is a big mistake when working with html).

I like to italicize, boldface, and underline words. This is done by enclosing the appropriate words in tags:

<i></i> as in <i>italicize</i>
<b></b> as in <b>boldface</b>
<u></u> as in <u>underline</u>

All three tags (and in fact any tags) can be used together in any order, just so long as the each tag is opened and closed. Often, crossing tags causes problems. That is to say, if each tag is an opening and closing parenthesis, then most parenthesis types can't cross other parenthesis types, but must be opened and closed in order.

That's whole crossing thing probably isn't very clear, but that's what syntax checkers are for).

<sup></sup> makes things superscript
<sub></sub> makes things subscript

And that's where the easy stuff ends.

Oh, I'll continue on for a few more lines, but if any of this is new to you and you're really interested in learning more, I recommend downloading KompoZer or some other WYSIWYG (What You See Is What You Get) html text editor. I don't like much how KompoZer puts together a webpage, but for quickly 'remembering' the proper tags for a table or outline, it can't be beat.


Advanced HTML Concepts

Heading Tags

Remember when I said worrying about presentation was a big (BIG) mistake when working with html? HTML isn't about presentation. It's about structure.

<h1></h1> main heading, only one per document in theory
<h2></h2> sub-points
<h3></h3> further stratifications

The h system goes down to h6 or so, I hardly ever use anything past h3 and prefer using bold instead.

Theoretically, search engines pay attention to what's inside the <h1></h1> tag (less so to what's in the <h2></h2> and <h3></h3> tags).

a href

To link to another page (my homepage, for instance):
<a href="http://paufler.net">www.paufler.net</a>
www.paufler.net

For email, it's:
<a href="mailto:paufler.net@gmail.com">paufler.net@gmail.com</a>
paufler.net@gmail.com

Whatever is between the end brackets is displayed. It doesn't have to relate to the rest:
<a href="http://paufler.net">Best Site on the Web</a>
Best Site on the Web

Most resources use the same (roughly) a tag format.
An image tag is slightly different. Note the lack of a matching closing tag.

<img
  src="path_to_img.png"
  alt="alternate text"
>
White space means nothing to html. Indentation is for your and my benefit alone. The computer simply does not even notice, much less care.

Bullet Lists

<ul>
  <li>Text Here</li>
</ul>


    
	
  • Main Line
    • 
	
      
		
    • Secondary Indent
      • 
	
    	


<ul>
	<li>Main Line</li>
	<ul>
		<li>Secondary Indent</li>
	</ul>	
</ul>

Closing Thoughts

There are hundreds of tags. I use maybe twenty on a typical page. Some folks recommend separating every paragraph with p tags (<p>paragraph</p>). I do not.

On the other hand, this page was formatted for the most using div tags. And to close this page, I'll list what I used, without much of an explanation:


For the small code boxes (which these aren't ironically enough):


<div style="display: table; margin: auto; width: 250px;"><div>
<pre><code>
Code Here

</code></pre>
</div></div>

And for the remainder of the left justified centred text (as opposed to the centred headings, which use center tags):


<div style="display: table; margin: auto; width: 50%;"><div>
Text Here
</div></div>

A Fond Farewell

If I lost you in there somewhere, suffice to say, simpler is better, and best to write HTML at the level that you understand, adding tags and tricks as your knowledge and skill level increases, which of course, in no time, will be way beyond mine, because believe it or not (quite like run on sentences), I like a simplistic page. Twenty tags, it's all I need, he said, when the Internet was young and HTML 5.0 seemed fresh and new...


paufler.net@gmail.com

Terms of Service
© Copyright 2015 Brett Paufler


<center>
<i>
This page clocks in at around
300 lines total
for 200 lines of text
which means,
there's 100 or so lines devoted to html
and blank-line white-space
(good for visual organization).

Seeing as how I've seen shorter pages
(less content)
that required 10,000 lines to display,
I'm thinking I'm doing something right.

But then,
plenty of folks would disagree...
</i>
</center>

This Would Be
Your Last Chance
To Visit
The Best Page on the Web