What is HTML?

…and how do we use it?

htmlpage

A sample webpage

HTML stands for HyperText Markup Language, but all you need to know is that it is a way to describe how webpages are laid out.  As you may already know, all html webpages are simply digital collages consisting of 2 primary elements: Text and Images. What sets web pages apart from their print equivalents and brings web pages to life is the addition of Links (hyperlinks) to other web pages, which allows authors to refer to similar relevant works, or spark exploration into tangential topics.

Using HTML, web page authors gain the power to instruct a browser to “Take this photo and put it in the top right corner of the page” or “Make a large heading for each of my topics, and under each, put a related paragraph to describe them”.

To learn to do this for ourselves, we first have to differentiate between Content and Markup Tags:

Content: is the actual text and photos that you want people to read. eg. “My Photos”
Markup Tags: (tags) are the invisible instructions you give to describe how the Content should be presented. eg. “underline” or “italicize”.

Another way to describe it would be that if Content is your Nouns, then Markup Tags are your Adjectives. The end result will be only your Content will be visible on the page, and the Tags invisibly decide how they should look.

To do this, HTML uses a very simple syntax (format) which consists of the 3 parts seen below:

HTML SYNTAX: <Tag>1 Content2 </Tag>3

1: Opening Tag : a tag surrounded by < and >
2: Conten
t : your text or images; can include other tag pairs
3: Closing Tag
: same as the opening tag but preceded by a forward slash

The 2 Rules of HTML:

  1. If you “open” a tag, you must “close” it.  ie. Every <tag> must have a matching </tag> somerwhere after it.
  2. Child tags must be closed before parent tags.  This is easier seen as below:
    LEGAL:
    <tagone>
        <tagtwo>
                Content
        </tagtwo>
    </tagone>
    ILLEGAL:
    <tagone>
        <tagtwo>
                Content
       </tagone>
    </tagtwo>

And that’s literally the most complexity you’ll have to deal with in HTML. No matter how complicated the page, it will always boil down to matched tags.  Although there are dozens of tags, you can write a perfectly good page only knowing about 10.  But if you need to use a tag that you’re not familiar with, there is a wealth of information on each online, so it should be a simple matter to look it up on a reference page such as this one.  In the next few pages, we’ll discuss a few of the more commonly used tags:

Prev Page: Lesson Goals
Next Page: Important HTML Tags