Posts Tagged ‘Basic Elements’

What is HTML?

HTML is an acronym for HyperText Markup Language, the basic publishing language of the Internet.

Every computer document needs a way to be read and understood by a computer program, for example Excel spreadsheets are stored in a special file with the extension XLS which  stores all the rows, columns, headers, footers, special cells, math equations etc for Excel to read and understand. Likewise, the HTML file format stores everything an Internet capable device needs to know to read and interpret a web document such as a web page.

There are actually a number of types of HTML, the first was created by Tim Berners-Lee in 1980 and composed of 22 tags, these special tags allowed users to define the paragraphs and other structural elements of their document as well as some basic elements for leaving comments and document items such as the title.

Although it’s been almost 30 years since the first standard was published, most of the basic elements of HTML are still used. For example, to give your document a title we still use the <title>My Title</title> tag combination and to form a paragraph, the <p>This is my paragraph</p> tags are used. In a lot of ways, the simplicity of HTML is what has allowed it to be so expandable.

You may have noticed that the examples above use an opening <p> and closing </p> tag to designate objects in the HTML code, this is fairly common and easy to understand principle. Essentially every element on a page should have both an opening and a closing tag to show where it begins and ends.

Common examples of HTML block tags are:

  1. The paragraph – <p>
  2. Unordered (Bullet) Lists – <ul>
  3. Ordered (Numbered) Lists – <ol>
  4. Headings (there are several) – <h1> … <h6>

While the above tags allow us to layout a basic HTML document such as a resume, it’s important to note that there are some additional basic formating tags needed as well. For example, if you would like to bold a word, you will need to use the <b>bold</b> tags.

Speaking of which, since HTML has evolved a long way we can sometimes achieve the same effect with different tags. For example, <b>bold</b> and <strong>strong</strong> have the same effect in most web browsers. Why the difference? The word bold refers to a method of formating, which implies the purpose of HTML is to affect appearance, while strong implies that the selected text be more significant than the surrounding text without assuming design elements.

Let’s look at another example, the HTML formating tag <i>italics</i> forces a web browser to display text as italics but <em>emphasis</em> has the same default effect. While they both force the document to appear the same (with italic text) this is not always the desired effect. Perhaps we would like a word to appear darker or lighter than the words around it when it requires emphasis. So a word that we would assume to be italics is in fact displayed as bold, depending on the formating instructions of the designer.

To format HTML text, we have several possibilities:

  1. bold / strong – <b> <strong>
  2. italics / emphasis – <i> <em>
  3. pre formatted – <pre>

As time moved forward, many additional tags and functions became supported by HTML as some tags became depreciated, others found themselves being introduced.