HTML 101, Part 1 – Introduction

« Web Dev Bootcamp – Introduction || HTML101 Part 2 »

Welcome to HTML Bootcamp day 1! This series will teach you the fundamentals of HTML and equip you to build your own website(s). Before we can hand you a gun and some bullets to start shootin’ , we’ll put you through some basic training to get you into shape first.

1. Introduction

So, what exactly is HTML? HTML stands for Hypertext Markup Language. HTML isn’t a programming language in the traditional sense, but rather a markup language consisting of a number of tags that are used to describe the data on a page so a web browser or a screen reader for example can understand it. The tags have less to do with the visual side of things, but rather gives meaning to the type of content contained between the tags, in other words HTML describes the content you see.

2. Tags

What is a tag? The syntax of a tag (how to write it) is the tag name wrapped in triangular brackets like this: <tag>. You get opening <tag> and closing </tag> pairs with content between them eg. <paragraph>Hello!</paragraph>, or in certain cases self closing tags. Self closing tags don’t wrap around data, therefore there is no closing tag needed. The break tag, used to put a break line in a piece of text for example, doesn’t wrap around anything, but instructs the browser to end the current line and move to the next one. It looks like this: <br /> (notice the slash before the closing bracket). Go to any website quickly, and right-click with your mouse on a page and select “view source” then you will see what a website’s source code looks like. You should notice a lot of tags. Tags can also contain attributes. To specify an id for example you write <tag id=”name”>.

Certain tags can be nested (put inside of) other tags for example a break tag can be nested inside a paragraph tag.


<p>

This is my text with a break tag <br />

inside my paragraph tags!

</p>

This structure resembles that of a tree, starting out with a trunk you move to the branches, then some smaller branches and finally some leaves. This tree structure is known as the DOM or Document Object Model. We won’t go into the details now, but just make a note of the term.

We’ll discuss the different tags, related attributes, and their uses later on, but for now it’s fine just to take note of their syntax and that they exist.

3. Versions

HTML has come a long way since the early 90′s with the release of HTML 2, 3 and 4, and HTML 5 being developed at the moment. XHTML, which is very similar to HTML, was also released after HTML 4. It is very similar to HTML but combines it with the strength of XML. We’ll be focusing on XHTML in this series. Don’t worry, they are all very much alike, and only differ in certain aspects of their syntax and supported tags. If you know XHTML you’ll be able to pick up HTML 5 in no time at all and be set for the battlefield!

With so many versions of HTML floating around on the web, an important part of creating your HTML file is to specify the type of document you are creating, also known as the Document Type Definition or DocType for short. This tells the browser what type of markup it can expect, so your document will be understood and rendered correctly.

So let’s look at a simple piece of HTML code found at the top of all html files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
</head>
<body>
..
.
</body>
</html>

So let’s look at the above code for a moment:

The first tag is the doctype, and as explained earlier this tells the browser what type of document to expect. So in our case the doctype is XHTML 1.0 Strict. There are a bunch of different doctype declarations which only a select and very special few people write from memory. To get examples of the different doctypes you can use, visit the w3c.

Next we meet the html tag. Inside this tag we specify a few attributes. The attributes specifies the namespace definitions with the corresponding url and the language, English in this case. As namespaces and XML are outside the scope of this article, if you like, you can quickly read up on an explanation of the above namespace here. It might look very confusing, but you’ll be happy to know that these declarations have been simplified in HTML 5. We’ll take a look at HTML 5 at a later stage.

The rest of the document is nested between the html tags. An HTML document is divided into a header (between the <head> tags) and a body, between the aptly named <body> tags. The header serves as a space to provide data about the page content to follow and the body section is where your actual content resides.

4. Conclusion

Congratulations recruit, you’ve made it through the introduction! You should have an understanding of HTML, tags, as well as the document types that exist and how to declare the one you want to use.

In the next section you’ll learn about different tools you can use to make your life easier when writing html documents, while also learning how to write your very first web page! So go and grab a gun from the armory and head of to the firing range – that’s an order!

« Web Dev Bootcamp – Introduction || HTML101 Part 2 »