Intro to HTML

HTML is the backbone of the web. Every time you look at an article, a webpage, or any type of content on a digital screen, HTML is in there. HTML is a programming language, but as far as code goes, it’s about as easy as it gets. Considering the ubiquity of this language, its ease of use, and the fact that we consume and create digital content every day, it’s definitely worth your time to learn to speak the language. This tutorial will provide a quick intro to HTML code, and will hopefully get you off on the right foot to build some basic webpages.

What is HTML?

This may not be the most captivating part of the tutorial, just like Art History isn’t quite as much fun as actually diving in and making some art. But it’s important to know the foundation. HTML is a programming language, as we know, but specifically it is a “markup language”.

What the heck does that mean? Markup languages use little bits of code called tags to “mark up” or label written content, to determine how that particular piece of content will be treated by a web browser or other application. For example, we will tag some pieces of content as headings, others as paragraphs, and others still as bulleted lists, or hyperlinks, or quotations.

This system of tagging webpage content was devised by the inventor of the world wide web, Tim Berners-Lee, who envisioned the web as a means of sharing scientific documents between researchers in various locations. He created HTML as the publishing language for this network of documents, which he probably didn’t quite realize would shake the world with the scale of its eventual use.

HTML isn’t the only markup language out there, it’s probably just the most common. Berners-Lee didn’t even really invent it; he modified an existing language called SGML (Standard Generalized Markup Language). Another very common language is XML (eXtensible Markup Language), which is used, for example by Microsoft Office documents to create the structure of the content of those documents (that’s what the “x” means in a “.docx” document).

Tags, Elements, and Content

Ok, enough history, time for action. Perhaps not the most exciting action on Earth, but valuable nonetheless. We create HTML using a variety of “tags”, which when wrapped around content, become an “HTML element”. “Content” is what you want people to read, see, or otherwise experience on your page.

You’ll often hear tags and elements mentioned nearly interchangeably, but that’s not quite the case. Here is the basic breakdown:

opening tag      closing tag

<tag> CONTENT </tag>

←        element          →

Here’s an example, and what it will look like in the browser:

<h1>Top Ten Composers of All Time</h1>

Top Ten Composers of All Time

The precise style of the h1 tag will ultimately come down to the CSS code that is written into the site’s stylesheet, but that’s another lesson for another day. Even without you creating CSS code, the browser knows to format the heading with bold styling and a font size that’s more than twice as large as paragraph text, all because of that h1 tag.

Basic Structure

Every HTML document, and in essence, every webpage in the world, has a basic HTML structure consisting of three main elements, plus a doctype. All specific elements will go into these three main elements:

<html> , <head> , <body>

HTML House - html, head, and body elements

One way to visualize this is looking at the basic structure of a house. As our sites grow in size and complexity, they’ll probably have more in common with an apartment building, but let’s keep it simple for now.

Everything in the page nests within the <html> element, the “foundation” of the page. The <head> is like the attic, in which we store useful stuff, but we don’t really want to take people on a tour of this part of our house/webpage. The <body> is the living area, where we put all of the visual content that we want to share with visitors.

Here’s the basic structure all put together:

<html>

<head>

(stuff that changes how the page works goes here, such as meta information, stylesheets, and javascript) 

</head>

<body>

(all your visible content goes here, including text, images, videos, etc) 

</body>

</html>

Doctype

The “doctype” is an important part of the page, which goes right at the very top of the code, and tells the browser what type of document to expect. As in, HTML vs XHTML, and what version of the language. Once the browser knows the language, it knows what rules to apply to your page. Nowadays, most pages will use the HTML5 doctype, which is pretty simple and clean:

<!doctype html>

Until recently, the doctype was a long and ugly creature, which was nearly impossible to remember. Let’s not worry about that, because from here on out, all versions of HTML will stick to that simple one above.

Nesting

Finally, a crucial concept to understand about HTML is “nesting”. We’ve already seen this in action in the basic structure above:  both the <head> and the <body> are nested inside of the <html> element. We’ll go deeper and deeper into this nesting structure, which will allow us to build more intricate layouts with specific types of content within specific parts of the page.

Here’s another example of the nesting structure, with an unordered (bulleted) list. The list item elements <li> are nested within the list “container”, the <ul>:

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Bananas</li>

</ul>

Adding More with Attributes

HTML tag elements like these are very general, in that all level one headings will be the same, as will all unordered lists, all divisions, etc. That is, unless we add something to them to make them more specific; and ultimately, that is what an attribute will do. Some elements simply won’t work without attributes, like images and hyperlinks, and others will benefit greatly from having some specificity.

This is the structure of an element with an attribute:

<tag attribute=”value”> CONTENT </tag>

And you can have multiple attributes applied to an element, separated by a space, and the order is up to you:

<tag attribute1=”value” attribute2=”value” attribute3=”value” attribute4=”value”> CONTENT </tag>

Now of course you would never see the word “tag” show up in an HTML page, so a real-world example would be more like:

<html lang=”en”>  CONTENT OF PAGE </html>

The lang attribute, quite naturally, stands for language, and this tells the browser to expect that this HTML page will have predominantly English-language content.

There are loads and loads of attributes out there, and fortunately you don’t need to memorize them all. We’ll see more as we go for specific elements.

As a general guide, here are some very common attributes and a brief description of their use:

Attribute Usage Typical Values
class Applies a “category” name to an element, which can then be used by CSS and JavaScript to add more specific style or interactivity, respectively. You make up the name, there is no set list of possible values
ID Similar to a class in that it gives a name to an element, but differs in that each ID name can only be used one time per page, whereas the class is infinitely reusable You make up the name, there is no set list of possible values
src Stands for “source”, and is used to show the path to a media file, such as an image or video images/filename.jpg
http://www.website.com/images/file.jpg
href Stands for “hypertext reference”, and is used to link to other documents, either for hyperlinks or to connect external files about.html
http://www.website.com/page.html
alt This adds some alternate text to an image, which is important for accessibility and SEO purposes “Helix River Media logo”
“fresh roasted coffee beans”

This is only the beginning, but you’ll definitely do well in knowing this handful of attributes.

Learn These Elements

Along those same lines, there are over 100 HTML elements, but do you need to know all of them? No frickin’ way. Or no frickin’ point, really – you just need the ones you need to get the job done right now. You’ll learn more as you go.

To get the basic job done right now, these elements will serve you well in nearly every webpage you might build:

HTML Element Stands for Description and Use
h1h2

h3

h4

h5

h6

heading level 1heading level 2

heading level 3

heading level 4

heading level 5

heading level 6

Creates the text headings in your content. The different levels are for levels of importance, not for the order they show up. For example, a level one heading might have several level two headings below it.
p paragraph This is for, well, making paragraphs as you might guess.
ulol

li

unordered listordered list

list item

To create a bulleted list, use first the <ul>, with <li> elements for each point.Same for the numbered list, use <ol>, with <li> for each point.
img images Inserts images!
a anchor (hyperlinks) The all-important hyperlink element. Remember, it’s the “a” that’s doing the work when you get to CSS.
div division A general divider of content, very useful for creating different parts of your design layout.
headerfooter headerfooter Pretty much every page has a header and a footer in the layout. Header typically has at least a logo and a nav menu, and the footer has at least a copyright notice.
tabletr

td

th

tabletable row

table data

table header

In the old days, these were used to build the layout of the page. Don’t do that (unless you’re creating a marketing email, in which case you’re stuck with this outdated layout system). However, we still want to make a table of data from time to time.
br line break This is a useful little guy for creating a single line break in the middle of a paragraph or other text content. Keep in mind it’s a “self-contained” element, so doesn’t need an open and close tag – just <br /> and it’s done.

Yeah, no doubt there are many, many more, but learn these now, and you’re well on your way.

Common Mistakes

Everyone makes mistakes in their code from time to time, even seasoned programmers. But here are some of the common beginner mistakes to keep an eye out for as you practice building your webpages.

I won’t provide the solutions here, try to figure them out on your own!  If you get stuck, leave a comment below.

  1. <h1>Monster Truck Rally Tomorrow!<h1/>
  2. <p>This has to be the <strong><em>boldest paragraph</strong></em> you’re likely to read today.</p>
  3. <a href=”services/rope-jumping.html”Rope Jumping</a>
  4. <div class=”box-2”> This is the content of Box 2 </div class=”box-2”>
  5. <p class =”first>Be sure to be careful with your punctuation, code is entirely unforgiving!</p>

Conclusion

Learning HTML is worth the time for anyone who creates any kind of content on a digital screen… which is to say, a lot of folks these days.

Like all new skills, it will take some practice and perseverance over time. (Check out this tutorial on Learning Tips that is helpful for optimizing your learning for any new skill).

Try out some of the practice exercises below, and once you’re feeling confident, it’s time for the next step:  working with CSS.  (tutorial coming soon!)