The Absolute Basics of HTML

Have you ever wondered what makes up a web page? It’s called HTML, and it’s something that everyone should know about.

What is HTML?

HTML stands for HyperText Markup Language.  It is a markup language, not a programming language.  This means that unlike languages such as C#, Java, etc., HTML marks up the file’s contents to tell the parser (your web browser) how the content contained within the file should be displayed.  Programming languages are executed and do work, while markup languages indicate how the content should be displayed.

Web pages are, at their core, made up of HTML. Sure, there are other pieces in some web pages, like Cascading Style Sheets, Javascript, and other languages, but these aren’t necessary to create a web page. The only stuff required for a web page to exist is the HTML.

Tags: The building blocks of HTML

HTML is comprised of elements. Most elements have a starting tag, some content, and then a closing tag. For example, here is a paragraph element:


<p>This is a paragraph element!</p>

As you can see, the paragraph element begins with a <p> tag, ends with a </p> tag, and has some content in between.  In fact, the general form for an HTML tag/element is:


<tag>CONTENT</tag>

Take special note of the forward slash immediately before the tag name in the closing tag. This is very important, as the web page will not look the way you want without it. Every tag must be closed by a closing tag counterpart.

Empty Elements

Well, almost every HTML tag has a closing tag counterpart. The exception is empty elements, which don’t hold content.  Here is an example of an empty element:


<hr />

Which results in:


Another example of an empty element is the img tag:


<img src="img1.jpg" alt="An image" />

An image

Images are inserted with the img tag

You may see this and think, “Whoa, hey, slow down! What are those other things, src and alt?” This may be a good time to introduce attributes.

Attributes

HTML tags often have certain attributes, or properties, that modify the element. Most tags have optional attributes like title and style while other tags have required attributes. The img tag from last paragraph has two required attributes, src and alt.

The img tag must have a src attribute because that attribute defines the path for the browser to take to find the image referenced by the tag.  And the alt attribute is required in case the browser cannot find the image. If the image cannot be accessed or doesn’t exist, the browser will display the alt text in its place.*

Some common attributes include:

  • style – sets the CSS styling for the element
  • class – sets the class (primarily used by CSS and JS)
  • id – sets the ID (primarily used by CSS and JS)
  • title – sets the tooltip text (box of text when you hover over the element)
  • href – hypertext reference (mainly used in links)

There are also global attributes, common to all HTML tags. W3Schools has a nice list of global attributes for your reference.

The Structure of an HTML Page

Like I said before, web pages are made up of HTML. But you can’t just start putting tags into an HTML file at random and expect it to look the way you want.  You have to follow HTML’s particular structure.

 The html Tag

The content of any webpage is wrapped in an html tag.  This is HTML best practice; most modern browsers understand if you leave them out, but it’s a big no-no. Here’s what it looks like:


<!DOCTYPE html>

<html>

...CONTENT...

</html>

That first line tells the browser that the file is a document of type HTML. It is a best practice introduced with the latest version of HTML, HTML5. We’ll talk more about HTML5 in another post.

Within the html tags, there are two main sections, the head section and the body section.

The head Tag

The head section is where the browser looks for important information about the document. The title that goes in the browser tab is set here. Also, lots of good information used by search engines goes in the head section.  This is where you will request CSS files and certain script files, too.

Here’s how we set the page’s title:


<head>

    <title>Website Title</title>

</head>

The body Tag

The body section holds all the content you see on a web page. This blog post is in the body section of this page! The body section is mostly just a container for the content. Here’s a line of text within the body:


<body>

    <p>This is a paragraph in the body section!</p>

</body>

Putting It All Together

Now that you know a bit about the structure of HTML, let’s build a simple webpage! Open up Notepad, or whatever text editor you have on your computer.  Microsoft Word is a word processor and WILL NOT work. Create a new file, call it sample.html, and save it as type “All Files” (not .txt).

Let’s start with the HTML tags:


<!DOCTYPE html>
<html>

</html>

Now we’ll put in the head and body tags:


<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
    </body>
</html>

Let’s add a title to our website:


<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Website</title>
    </head>

    <body>
    </body>
</html>

And finally, we’ll add a bit of text, including a header:


<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Website</title>
    </head>

    <body>
        <h1>Welcome!</h1>
        <p>I hope you enjoyed this post!</p>
    </body>
</html>

Now save sample.html again, go to it’s location in the file explorer, right click on sample.html, and click Open With. Choose your favorite browser and click Ok!

You should be seeing something like this:

Finished Sample Page

A simple web page

If your page doesn’t look like this, gives an error message, or just doesn’t show up, leave a comment below and I’ll help you figure out how to fix it.  Thanks for reading!

Happy Programming!

-Nathan

 

* The alt attribute is also used to improve SEO, Search Engine Optimization, but we’ll cover that topic another time. For now, check out this blog post on SEO.

Advertisements

What do you think? Leave a comment!

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