Beginning HTML

Websites 1

There are more than a billion websites on the internet. From massive services like Facebook ...

Websites 2

... to simple websites like blogs, communities, and discussion forums.

Websites 3

But no matter how complex or simple, most websites are written in HTML.

Let's have a look behind the scenes of this website.

<html>
 <body>
  Welcome, friend!
 </body>
</html>

Look at that! This bit of code around  Welcome, friend! already makes a website.

HTM-what?

HTML stands for Hypertext Markup Language. With HTML code, we can tell web browsers how to display a website. 

Web browsers

Web browsers like Chrome and Safari know how to read HTML code and display websites based on the code.

Let's make Hello, World! display in this website.

<html>
 <body>
  Hello, World!
 </body>
</html>

Nice! These cryptic words seem to tell the browser to display Hello, World!.

Structure

HTML code has a special structure. For example, it begins with the word <html>.

<html>
 <body>
  Hello, World!
 </body>
</html>

There! With <html> at the beginning, the web browser knows that it can expect HTML code.

Tags

<html> is a tag. Tags help the web browser figure out what to make of any text that's before or after them.

Can you remember another tag?

  • <body> and </body>

Great! We'll find out what the <body> tag does in a minute.

Angular brackets

Tags begin with a < sign and end with a > sign.

<html>
 <body>
  Hi, I'm written in HTML.
 </body>
</html>

Sweet! Tags are hard to miss with those angular brackets around them.

Pairs

Tags often come in pairs. If you see <html>, for example, chances are that there's a similar tag close by.

<html>
 <body>
  Hi, I'm written in HTML.
 </body>
</html>

Fantastic! The <html> tag has a sibling: </html>.

Beginning

These tag pairs consist of an opening and a closing tag. Opening tags use a < sign, a special word, and a > sign.

<html>
 <body>
  Hi, I'm written in HTML.
 </body>
</html>

 

Great stuff! All HTML opening tags follow the exact same pattern.

Ending

Closing tags have an extra character before the special word: a / sign.

<html>
 <body>
  Hi, I'm written in HTML.
 </body>
</html>

 

See that? The / sign closes the tags.

Using tags

<html>
 <body>
  Hi, I'm written in HTML.
 </body>
</html>

 

Nice! You're getting good at this.

A closing tag has a / sign and goes after an opening tag. We'll need <html>, <body>, then </body> and finally </html>.

Body

Anything we want the web browser to display needs to go between<body> and </body>.

<html>
 <body>
  Hi, I'm written in HTML.
 </body>
</html>

There we go! The text goes in between <body> and </body>.

Simple website

With that, we can already build a simple website.

<html>
 <body>
  Welcome to my website!
 </body>
</html>

Sweet! Now it's time to take the next step.