Introduction to HTML: HTML tags

As you saw in the tutorial about your first web page, web pages consist of HTML code.

What does HTML code look like? Like this:

<!doctype html>
<html>
 <head>
 <title>My first web page!</title>
 </head>
 <body>
 <h3>Hello world!</h3>
 <p>
 This is my first web page, thank you for visiting it!
 </p>
 </body>
</html>

HTML Tags

Those <things> you notice between <brackets> are called HTML tags. They are the bits of code that specify to the browser how to display your web page. There are different types of HTML tags, and they each mean a different thing.

So, in summary, here is the rocket science formula behind a web page:

CONTENT + HTML TAGS = WEB PAGE

(note that we will add more stuff to this formula later on)

Most HTML tags consist of an  opening tag and then a closing tag with something between them. For example, a header is indicated by the <h1> tag, and appears like this: <h1>Header of the page</h1>. Notice the / in the closing tag!

It doesn’t matter whether the tags are on the same line as the content. So this

<title>This will be shown in the browser tab</title>

is 100% the same as

<title>
      This will be shown in the browser tab
</title>

Other tags are self-closing tags. There is just one of them with all the information. The tag to insert a line break is an example: <br /> another self-closing tag is the one for images: <img />. You’ll learn more about these soon.

Some common HTML tags

The <html> tag

Mandatory in each web page.

The <head> tag

Mandatory in each web page. Some ‘meta information’ for the browser about the page

The <body> tag

The actual content of the page.

The <title> tag

Goes within the <head> section, and indicates what your browser should show in the page tab.

The <h1>, <h3>,<h3>… header tags

Formats something as a header, i.e. bigger and bolder.

The <a> tag

Includes a hyperlink to another page. You’ll learn how to specify to which page in the next 10 seconds.

The <img> tag

Includes an image. You’ll learn how to specify which image in the next 4 seconds.

Tags have attributes

An attribute specifies some extra information about the element for the browser.

The href attribute on an <a> tag for a link, specifies where a link should point to, like this:

<a href="http://www.webcodingforidiots.com">Start learning, idiot</a>

Typing this HTML code in your web code would show as follows in your browser:

Start learning, idiot

The src attribute on an <img> tag to show an image, points to the online location of that image. So we can steal an image from google like this:

<img src="https://www.google.com/images/srpr/logo11w.png" />

(self-closing tag, remember!)

And the result:

HTML Tags can be nested

So you can have tags within tags (within tags withing tags)… And this happens all the time actually. To make an image that is also a link, you could nest the <img> tag within the <a> tag like this:

<a href="http://www.webcodingforidiots.com"><img src="https://www.google.com/images/srpr/logo11w.png" /></a>

And the result of that would be:

Two More Things That Are Too Lame For Their Own Lesson

The first is that you can add comments in HTML code by putting text between <!– and –> symbols. Comments will be totally ignored by the browser. These come in handy for little explanations, like this:

<body>
<!-- In the body comes the actual page content -->
<h1>Hello world!</h1>
...

Profanity in code comments is not at all frowned upon, tradition among programmers even. However, do realise that any visitor of your site can right-click it and go ‘view source’ and see the comments.

The second lame-but-obligatory thing is that each HTML document starts with a doctype declaration at the very top. The doctype declaration tells the browser which version of HTML you are using, and helps it with rendering it the correct way. There will come a point in your life where you will need to read up on doctype declarations because Internet Explorer is fucking up your layout and ‘quirks mode’ is the answer. But that time is not now.

Just put

<!doctype html>

At the top of each HTML page you write, remember that this indicates ‘HTML5’ which is the best HTML, and move on.

Conclusion

Because well, let’s face it, this web site isn’t called Web Coding For Geniuses, let’s summarize what we learned:

  • HTML tags are used to tell the web browser what to show.
  • HTML tags can be either made up of an opening tag and a closing tag with something in between like <a></a>, or a self-closing tag like <img />.
  • HTML tags have attributes with extra info, like <img src=”imagelocation.jpg” />.
  • HTML tags can be, and often are, nested.
  • HTML pages can also contain comments which will be ignored by the browser: <!– this is a comment –>
  • HTML pages start with a doctype declaration.

You may need to sleep on this for a while.

Or, if sleeping isn’t really your thing, you may proceed to the next lesson right away: a bit more about creating hyperlinks with the <a> tag!

Advertisements

6 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s