HTML Basics - Learn From The Ground Up!

By: Daniel Imbellino
Updated: Feb 28, 2013

   HTML is actually a language, and just like the English language it has a set of rules and proper structural procedures that govern its use. In English, this is known as proper grammar. Once you are able to properly comprehend a language, you can then read it, write it, and use it to its fullest. HTML is a markup language that uses “tags” to markup text, elements, etc, and just like the English language, it too has its own set of rules and proper procedures that need to be followed in order to make good use of it.

Before we get started we need to clarify a few things first. For starters what you are going to learn here is actually XHTML (extensible hyper text markup language). XHTML shores up many of the problems that plagued older forms of HTML markup, and it does this by requiring stricter coding practices. There is less room for error, and XHTML coding is alot cleaner and easier to read by both humans and search engines, etc. If you plan on learning HTML 5, instead learn XHTML, then consider learning about XHTML5 which will be available in the near future.

You may see various tutorials use the words “tag” or “element” interchangeably; this is because they both mean the same thing. While the word “tag” is useful with HTML, it is not really the proper pronunciation for markup in HTML, although it’s perfectly OK to use this term. Elements are what we use to markup text, data, etc, in our web pages.

You will need a text editor of some sorts in order to write your HTML documents. You can use Windows notepad, or download Notepad++ from Google search. Make sure that when you are saving your documents, that you select “all files” from your text editors drop down menu. Don’t save your documents as “txt”. Saving as “all files” in notepad allows you to save a given document with its proper file extension and properties for that file extension. All your HTML documents will need to be saved with the .html file extension, and you will need to specify the type of encoding you plan to use in your document, most likely UTF-8, or ASCII, either is fine really. Character encoding is beyond the scope of this tutorial, but you can learn about it in our other tutorials for “meta tags” and “document type declarations”, etc. Just be sure to use one when saving your document. Notepad saves documents using ANSII (which includes ASCII (ISO-8859-1 character encoding, which is the western European character set) by default).

Elements generally start with a “less-than” sign < to signify the beginning of the start of an element, and end with a “greater-than” sign > to signify the end of a given element. In many cases we use a forward slash to indicate the end of a paired element in a set of nested tags in HTML, such as <html></html>.

HTML documents generally start with a set of nested html elements that encapsulate other elements within its structure, like so:

<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<h2></h2>
<p></p>
</body>
</html>

HTML provides a way to format web pages, similarly to how an author writing a book will format their pages on a word processor, a type writer, or in a word processing program, such as Microsoft word.

Notice the opening and closing HTML tags, these are known as paired elements. All other elements are nested within these tags, and some elements are nested within other elements, as our example has shown above.

The basic HTML elements are very descriptive of their uses. For instance, the <head></head> tags signify the header for our HTML document, while <p></p>tags signify the use of a paragraph. The <h1> and <h2> tags signify the headings for our document that users will see on the screen when viewing our webpage. You can use h1 thru h6 for your headings, but you shouldn’t use multiples of each within the same document. Likewise, you can use as many paragraph tags as you wish. The information displayed in the <title> tag is what you see on the browser tab for a given webpage.

Notice all of the elements consist of an opening and closing tag, and all closing tags have a forward slash indicating the closing of an element. However, not all tags have both an opening and closing tag, and these tags are known as “open elements”.

Here’s an example of a few open elements you will come across in HTML:

<img src=”image-one.jpg” />
<br />
<hr />

The <img /> element is used as a content holder for binary data consisting of various image protocols. Notice the “src” attribute, followed by the name of the image file, followed by a forward slash and a closing greater-than sign. The “img” portion declares the start of a new image, followed by the “src” attribute, and finally the image name itself along with the images file extension (.jpg).

There are a multitude of elements that can contain attributes just like the <img /> tag, but they all follow the same convention:

<element attribute=”attribute-value” />

In this case the attribute value does not really indicate an equivalent of our attribute. Instead, the equals sign is used to assign a value to our attribute (acts as a content holder for data). Also, attributes and attribute values must be encased with quotation marks.

The element in this case was our <img /> tag, the attribute was our “src” ( as in source) tag, and our attribute value was the name of the image file itself that we are referencing (whatever-image.png).

We can assign other attributes to an image as well. We could add height and width attributes to indicate the overall size of our image like this:

<img src=”image-two.jpg” width=”400px” height=”250px” />

We could even add an attribute that provides information about the image file itself with the use of the “alt” attribute:

<img src=”image-three.jpg” alt=”info about our image goes here” /> (returns alternate information for image files, etc).

We can also use multiple attributes when the need arises:

<img src=”image-four.jpg” width=”150px” height=”150px” alt=”info about our image file” />

Either way, open elements always end with a forward slash and a greater than sign.

Take notice that all of our elements are spelled out using lower case letters, and this is because all HTML elements should be written using lower case names only! The tags and are not the same thing. Using capital letters in HTML is strictly illegal. We used capitals here to describe what we were talking about, not to describe the code on a web page!

Building a website starts with the creation of an “index.html” file that serves as the root file of your HTML directory. This is also known as a homepage. You would then create links from your homepage (index.html) that point to other files (webpages) in your sites directory.

Here’s another example of a working web page, but with elements being filled in with content:

<html>
<head>
<title>Web Design Tutorials</title>
</head>
<body>
<h1>Intro To Web Design With HTML</h1>
<h2>Learn The Basics Of Web Design</h2>
<p>Hyper Text Markup Language is the common language of the web. It provides a set of formatting procedures for webpage’s, and is considered a standard that provides compatibility among the internet and its users</p>
<img src=”logo.png” alt=”HTML logo” />
</body>
</html>

Now we’ve put our markup to work with the use of meaningful information.

Some elements can be nested inside other elements, but there are some improper ways to nest your elements. Here’s one example:

<html>
<head>
<title></title>
</head>
<body>
<h1>This is our heading<h2>
</h2></h1>

This is improper syntax and will cause errors in your markup

The proper way to nest would be:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Here we created an unordered list. Notice the <li> (list item) tags are nested inside the <ul> (unordered list) tags as shown. This is the proper way to nest elements, with one set of tags nested inside the other as shown.

Remember the <br /> and <hr /> elements we mentioned earlier? These are obviously open elements, but they have special purposes. The <br /> tag indicates a line break. You would use a line break when you need to add space between content from one line to the next, for example:

<p>
This is a paragraph.<br />
This text would be broken to the next line.
</p>

The <br /> tag would break our content to the next line just as shown.

The <hr /> tag is used to insert a horizontal rule in our content. This could be used, say for instance, after a heading tag to help separate our content, or possibly between images or other elements when necessary.

The <hr /> element, just like the <img /> tag, can have attributes associated with it:

<hr width=”700px” height=”10px” />

Continue to Part 2 "Adding Basic Style Information"