HTML Introduction

Hello, world! Oh yeah, you too, Mr. Budding Coder. This page is here to introduce you to HTML. You should check out the Beginner Wikia-ML and the Advanced Formatting pages first, as some of the skills learnt there transfer neatly to HTML. If you have, let's begin.

## An Introduction To HTML

If you've never touched coding before, you're likely thinking something along the lines of:

### What is HTML?

HTML is a computer language designed to allow website creation. Most, if not all, websites use this. The language is relatively easy to learn, with the basics being accessible to most people in one sitting, while still being pretty powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the W3C, the organisation charged with designing and maintaining the language (and by extension, pretty much the entire Internet).

HTML stands for **H**yper**T**ext **M**arkup **L**anguage.

**HyperText** is the method by which you move around on the web — by clicking on special text called **hyperlinks** which bring you to the next page. The fact that it is *hyper* just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in. This would be an example of a hyperlink.

**Markup** is what **HTML tags** do to the text inside them. They mark it as a certain type of text (*italicised* text, for example).

As for **Language**, it means it is a computer language.

## How does it work?

**Magic.** Okay, seriously.

HTML consists of a series of short codes typed into a textfile by the site author — these are the tags. The text is then **saved as a html file**, and **viewed through a browser**, like *Google Chrome* or *Mozilla Firefox*. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

## Tags

If you went to at least one of the pages linked at the very beginning of this article, you might have seen some code-y stuff written between two angle-brackets, "<" and ">". (*"And the Use of Scientific Terminology Award goes to..."*) Well, those were pretty much tags, and fortunately they're the only kind of brackets you'll need to code HTML. Whatever's written between those tags defines what action the webpage takes when it reaches those tags. Writing the same tag but with *"/"* before the instruction will end that action. For example, here's a classic *"hello world"* program:

```
 <!DOCTYPE html>

```

```
 <html>

```

```
   <head>

```

```
     <title>This is a title</title>

```

```
   </head>

```

```
   <body>

```

```
     <p>Hello world!(</p>)

```

```
   </body>

```

```
 </html>

```

It may look a little confusing at first glance, but it's really rather simple.

* <!DOCTYPE html> just tells the browser the code is HTML. Well, it's a little more complex than that, as the value "html" holds the latest version of HTML, and you can write pages using older HTML standards (although why you'd want to is beyond anyone), but that stuff's for crazy people.

* <html> and </html> define the start and end of the HTML. (You'd think since the entire document is HTML, you wouldn't need to type these two tags, but HTML isn't exactly intuitive.)

* <head> and </head> mark the beginning and end of the **head**, which actually means the title. This is the text users will see on their Internet browser when looking at their currently open tabs.

* <title> and </title> mark the beginning and end of the *title*, which is the actual text.

* <body> and </body> are the two tags containing the code for the actual webpage - what the user will read on the page itself. Most code ends up between these two tags. As for other body parts... **THEY'RE USELESS! WE DON'T NEED ANY LEGS OR HANDS OR EYES OR HAIR OR <INSERT BODY PART HERE>!** *</crazyeditor>*

* <p> is short for **paragraph**, and starts a new line of text, like pressing the *enter* key in a text editor. HTML ignores new lines directly typed, giving you freedom to organise your code but meaning every new line needs a <p> tag. (When you're writing stupidly long pages, you'll really want to organise well.) You'll notice the closing tag for <p> is in brackets. This is because *technically* the closing tag isn't actually required in HTML, although it **is** necessary in XHTML. (In case you're wondering, the X stands for "extensible".) However, you should always close your tags out of good habit, as it will make your page's code easier to read. (This comes with the exception of <!DOCTYPE>, as there is no end tag.)

If a webpage runs the above code, the webpage's tab will say:

*This is a title*

The page itself will just say:

*Hello world!*

## Tags (Usually) Come In Pairs

As mentioned earlier, a tag has two versions: the normal tag which starts a command, and the "slash" tag that ends it. Almost every tag has both these version ***which must both be used***, although in special cases (like <!DOCTYPE> and <p>) the end "slash" tag isn't actually necessary. Until you learn these special tags, though, assume every command has both a start and an end tag. Now here's where it starts to get a little bit confusing.

**Every single HTML command's start and end tags must both be contained within the same parent command.**

Confused? Everyone is when they first learn this, so don't worry - you're not alone. All this means is if you've started a command within another command, you have to finish the inner command *before* you finish the outer command. For example, you'll notice the <head> and <body> sections in the above example didn't overlap. That makes sense enough; you're not going to keep the entire page's text on the tab at the top of the browser. The point is you have to finish <head> before you start <body>, otherwise the outer command is going to finish before the inner command does, and the whole page will come crashing down like the Matrix if it suddenly started running on Windows Vista.