HTML and Tags

In the example fragment of an HTML file in the last topic, we saw our first piece of HTML markup. This is part of what goes in an HTML file, but there needs to be more to make a complete page.

HTML files are edited with a text editor: just make sure you save the file with the extension .html (i.e. name it something like mypage.html).

There are a few basic pieces that need to go in an HTML file to get us started. Here's an empty HTML page: this is code you can type into a text editor and save as something.html.

<!DOCTYPE html> 
<html>
<head> 
<meta charset="UTF-8" />
<title></title>
</head> 
<body>
</body>
</html>

That certainly deserves some explanation, but you can copy-and-paste it into a text editor now if you'd like to experiment. That is a perfectly complete (but empty) HTML page.

HTML Tags

The things wrapped in triangular braces (the < … > characters) are called tags. These are the most important part of HTML markup that is used to describe the structure of content. There are both opening tags and closing tags (or starting tags and ending tags) which come in pairs to enclose pieces of content.

For example, in the above example, <title> is an opening tag, and </title> is the corresponding closing tag. The <title> tag is used to enclose the main title for the document: the one that is displayed in the title bar of the browser (and used as the label if you bookmark the page, and displayed in search engine results for the page).

One other tag we should look at right away: the <body>…</body> tag is used to encose the main part of the page: the actual content that you read in the browser's main window.

Let's add a little to our page so there's actually something to see when we load it:

<!DOCTYPE html> 
<html>
<head> 
<meta charset="UTF-8" />
<title>My First Page</title>
</head> 
<body>
<p>This is a paragraph on my page. It shows the kind of stuff
that goes into the page body.</p>
</body>
</html>

The … tag is used to enclose a paragraph on the page. The sentence “This is a paragraph on my page.” will appear formatted as a paragraph when we view the page in a web browser. You can view this HTML file here.

You might notice on that page that the line break in the code above doesn't match the way the paragraph is formatted when you view the page (unless you happen to have the exact right size browser window to display the same way). In HTML, all of the formatting must be specified with tags (and CSS as we'll see later). The  tag indicated that we wanted the content formatted like a paragraph: the browser did that and chose the places to break the lines (among other things) for your browser.

Also try working with this HTML: copy-and-paste the HTML code into your text editor, save it as a .html file, and open that file in your web browser. It should look the same as when you clicked the link in the last paragraph. Try adding a second paragraph after the one in the example; reload the page in the browser to see what it looks like.

The term element is used to refer to one instance of a tag and its contents. For example in the above, there is one title element, <title>My First Page</title> which has an opening tag (<title>), a closing tag (</title>), and contents (My First Page),

Basic Tags

There are several tags in the example above that haven't been explained yet. These need to be in every HTML page.

<!DOCTYPE html>: This isn't really a tag or an element, it is the document type declaration (or doctype) for the page. This doctype indicates that the page is HTML5. The doctype doesn't have a closing version: it's the first thing in an .html file and stands alone.
<html>…</html>: This element contains entire HTML page. It should be the first tag to start (after the doctype) and last to close.
<head>…</head>: This element contains information about the page (as opposed to content of the page). For now, it will hold only the <title> and <meta> tags.
<title>…</title>: This element gives the main title for the page. It gives the main title for the document, which is used in the title bar and for bookmarks to the page.
<meta charset="UTF-8" />: This tag tells the browser about the “character encoding” for this document. The details aren't important now, but it's a property of how the text file is encoded when it is saved. This <meta> tag should be in every HTML file like this.
You may have also noticed that it has no closing tag, and that there's some extra stuff in the tag. We will get to that very soon…
<body>…</body>: Finally, this element contains the actual content of the page: the part that is displayed in the main browser window. Most of the new tags we learn will go somewhere in the <body>.

These tags are always arranged this way in every HTML page. In our example, we have a simple  element in the body: that is where we will need to expand the number of tags we know first.

More Tags

Let's introduce a few more tags in another example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>More HTML Tags</title>
</head> 
<body>
<h1>More HTML Tags</h1>
<p>This is a paragraph with <em>some important words</em>
in it. Here is a list of this course's major topics:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>

The elements here are generally like the ones we have seen before: and opening tag, some content, and a closing tag. The differences are in what they mean and how they are put together to describe content.

<h1>: This tag is used for a “level 1” heading. That is, it's the most important heading on the page. Typically, every page should start with an <h1> that has the same contents as the <title>: the main title for the page.
: This tag indicates emphasized text: some important word or phrase in the sentence. An  must go inside a paragraph (or heading, or other “block-level” element as we'll see later).
<ul>: This tag describes an unordered list. That is, it contains a list of things where the order isn't important. The <ul> element (and the ordered list version <ol>, or menu list <menu>) can't contain text the way a  can: it can only contain <li> elements.
<li>: These are the only thing that can go in a <ul> or <ol> element (and can only be inside one of those elements). They denote list items.

As you can see from these, each tag has some rules about where it can be place or what can be placed in it:  must go in a  or similar; <ul> must contain only <li>s.

Notice that the line breaks, spaces, and other formatting in the HTML code have no effect of the display in the browser. If you press enter a few times to insert a blank link in the HTML, it will not change the appearance in the browser. You must use tags (and later we'll see CSS styles) to change the way things look.

In other words, these three  elements are exactly the same af far as the web browser is concerned:

<p>This is a paragraph.</p>

<p>This      is  
a paragraph.</p>

<p>
This    is     a paragraph.
</p>