Home Software And TechnologyWeb DevelopmentHTML5 Tutorials HTML5 Tutorial #1: Getting Started

HTML5 Tutorial #1: Getting Started

by wforbes

Every website on the internet is made using HTML. Learning how to read and write HTML is a great first step toward becoming a web designer, programmer, or developer. It can be really useful in other jobs, too. Imagine being able to set up a simple website for your office to track important information or fix your company’s website without having to contract out?

In this tutorial series, we learn about what HTML is and some of the basics of working with it. We’ll cover all the basics from the ground up, then progressively move on to more difficult and interesting stuff. By the end of this series, you should be able to get started with creating and managing a full live website, ready to take the next steps toward learning a server language or continuing to advance your front-end skills.

By the end of this article, you’ll learn the core concepts of how websites are made from HTML and you’ll create a very simple website of your own! Let’s get started.

What does HTML mean?

HTML stands for ‘HyperText Markup Language“. That’s a mouthful, isn’t it? Let’s break down what that means.

HyperText is a word used to describe special text, images, or other items displayed on a web page that ‘links’ to another web page. Clicking on a HyperText link with your computer mouse or tapping it on your smartphone screen brings you to a new document or web page. Have you ever clicked a link on a webpage to navigate to another webpage? Congratulations, you’ve used hypertext.

Markup Language is a term used to describe a formal system to format and structure a document. Although normal documents that you may create for school or work appear to be structured with headings and paragraphs, there’s nothing in the text that signifies that structure. Using a markup language specifically annotates the text with special symbols. These symbols represent things like “This text here is the introductory paragraph” or “This section of the page is about potatoes”. Using markup languages like HTML, we specify a little more information about the parts of our document and thus give it some structure. This makes it easy for our computers to look through it and know what’s going on. In HTML, the markup that we use to annotate our document includes elements and tags, we’ll learn about what those are in this article.

What’s the 5 mean in HTML5?

HTML5 is the 5th version of the HTML language. Although HTML has been around since the early 90s, this 5th version was released in 2008, really started picking up steam by 2012, and was widely used as the defacto standard on the internet in 2014.

There are huge differences between earlier versions of HTML and HTML5 which we won’t detail in these articles. Just be glad that you’re learning HTML5 – it provides countless awesome features that has really helped make the internet what it is today. High-quality YouTube and Netflix videos, high-performance browser games, fast responsive modern websites like Facebook, AlliExpress, Twitter, and many more are all made possible by what HTML5 can do.

Some Internet Basics

First, let’s get some very basic knowledge of the internet out of the way so we’re all on the same page.

When you open a program like Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox, or Safari; you’re opening a web browser or internet browser. As the phrase implies, it’s a program that lets you browse the web, and the internet. Each internet browser has an address bar. When you type in a website address like “https://google.com/” or “https://wikipedia.org/” your internet browser finds that website on the internet and displays it for you. You may see the acronym “URL“, or Uniform Resource Locator. That’s just a fancy term for the address of a website.

When you visit a website, the first thing you see is a single webpage, called the index. Commonly referred to as the ‘home’ page or the ‘main’ page. As you click on links, buttons, and graphics on the webpage; your computer or smartphone loads other webpages (thanks to HyperText).

The webpage you’re looking at now, just like any other, is made from an HTML document. Your internet browser received this HTML document from the web server that hosts this website. Then, it parsed the HTML document to know what was in it. Finally, it displayed this website for you with all the right colors, fonts, and layout. It does all that in a matter of seconds, or sometimes faster!

A web server is a special computer connected to the internet that responds to requests from computers and phones like yours. It replies to those requests with webpages and other data.

The term parse is used to describe the process a computer uses to break a large group of text into smaller parts and understand what each part means. Markup language makes it easier for your computer to parse and understand what’s in the HTML document and how to display it for you.

If you’re using a computer right now you can go ahead and check out the HTML document for this webpage. Just right-click on this page, select ‘View Page Source’, and a new tab or window will open that shows you the HTML code.

Right-clicking on this webpage opens the Context Menu, selecting ‘View Page Source’ will open the HTML document for this webpage
This is an example of the HTML code that this webpage is made from

So with all that said, hopefully, it makes sense that if we want to create a webpage, we’re going to need to create an HTML document. Then, when we open the HTML document with a web browser, we’ll see the webpage we created. Let’s start by looking at what HTML documents are made from, tags and elements.

HTML Tags and Elements

You’ll notice in the screenshot above that the HTML document for this website has a lot of “<” and “>” symbols. You may know them as the ‘greater-than’ and ‘less-than’ symbols from math class, but in HTML they mean something very different.

These are known as “angle brackets” and they are the opening “<” and closing “>” parts of an HTML tag. Between the angle brackets, we put the name of the tag. When the web browser is parsing the HTML document, the opening angle bracket tells the browser “Hey this is an HTML tag”, the name tells the browser what type of tag it is, and the closing angle bracket tells the browser “Ok, that’s the end of this tag”.

Although you can name an HTML tag anything you’d like, web browsers only know about official tag names, of which there are just over 100 to choose from. Don’t worry, you won’t need to learn them all right away. We’ll only cover a few in this article. When you use a name in an HTML tag that the web browser doesn’t recognize, it just treats it as normal text.

We use HTML tags to create an HTML element.

A diagram of the parts in an HTML tag

The HTML elements that we’ll go over in this article have two HTML tags each. One tag at the beginning of the element and another tag at the end of the element. Let’s take a look at our first HTML element, the paragraph element!

Paragraph Elements

A paragraph HTML element:

<p>This is my first paragraph. It's not a very long paragraph. Cheers!</p>

At first, you may just see a couple of sentences there but pay close attention. At the beginning and end of that line of text are paragraph HTML tags.

The first paragraph tag at the beginning of the line is made up of three parts. It has an opening angle bracket “<“, then it has the letter “p” (the name of the paragraph element), and then it has a closing angle bracket “>”. This is the opening tag.

Then what follows is the text that we’d like to be considered as the content of the element. This is the text that will be visible on the webpage.

Finally, at the end of the line, you see our closing tag. The closing tag looks the same as our opening tag, except we must add a forward slash “/” before the element name so that the web browser knows that it’s a closing tag and our element is ending here.

Your First Webpage

Now that you’ve seen what an HTML element is, let’s put it into action! The easiest way to create a webpage is by using a simple text editor. Word processors like Microsoft Word, Pages, or Google Docs will not work for this. On Windows, you should have the Notepad program available and on macOS, you should have the TextEdit program. I’m a Windows user, so the examples you see here will be with Notepad, but TextEdit should work just fine if you’re using an Apple computer.

Note: There are special programs known as ‘code editors’ which make writing code much easier, we’ll learn about those in the next article. For this example, we’ll keep it simple and use a regular old text editor.

Step 1 – Open Notepad or TextEdit

First, open your text editor. On windows, you can press the Windows key to open the search, type “notepad” and press enter.

Opening Notepad from the Start menu search

Step 2 – Write your HTML code

Next, once Notepad opens go ahead a create your first HTML. Use what you learned about HTML tags to create a paragraph HTML element. Add whatever text you want as the content, extra points if it’s something really silly.

Our first HTML element typed into Notepad

Step 3 – Save as .html

Now here’s the trick. When you save this document, change the ‘Save as type’ to the “All Files (*.*)” option. Doing this lets you save the document as any type of file you’d like. Then make sure your file name ends with “.html” to specify that this is an HTML document. Save the file in a location that’s easy to find, like your Desktop.

Choose the ‘All Files’ option under ‘Save as type’ and end your filename with “.html”

Step 4 – Open your web page

With that file saved, it should show up like any other file on your desktop. However, when you double-click it to open it, since it’s saved as an HTML file, it will open in your default internet browser! Congratulations, take pride in your first simple website as you behold all its glory!

One of the most simple web pages you’ll ever build…

Let’s See Some More Elements

Heading Elements

The next type of HTML element you should be aware of right away is the heading elements. They are very similar to the paragraph element, but there are 6 different types all ranging in size from larger to smaller.

Their names are h1, h2, h3, h4, h5, and h6. The largest heading tag is the <h1> tag. This tag can be used as the main title of the webpage or the most important bit of text on the page. Smaller, and meant for sub-titles and less important content, is the <h2> tag. As the number in the element name gets bigger, the size of the text that shows up on the page gets smaller. The heading tag with the smallest page appearance is the <h6> tag.

<h1>This is the title</h1>
<h2>This is the sub-title</h2>
<h3>This is heading is smaller</h3>
<h4>This heading is even smaller</h4>
<h5>Even smaller than that</h5>
<h6>This is the smallest</h6>
An example of each heading tag…

Note: It’s important NOT to use headings to simply enlarge or embolden regular content, there are better ways to do that which you’ll learn in the next article. Instead, headings should be used to annotate titles or other important content, distinguishing them from less important content like paragraphs.

Structuring Your Page With HTML

With heading and paragraph tags we can structure and organize a document so that it’s more than just a bunch of text. Placing an <h1> element at the top of the page implies that the content in it is probably something like the page title or the main subject of the page. Using smaller headings like <h2> or <h3> before some paragraphs can separate the document into sections. This implies that the heading tags contain the titles for sections of the page, with the paragraphs containing the content for those sections.

Here’s an example of some HTML that demonstrates this sort of organization:

<h1>Bob's Tractor Store</h1>
<h2>"The best tractors in town!"</h2>
  Bob's Tractor Store is a small family owned business that 
  provides quality tractors at rock bottom prices
<h3>What makes our tractors the best?</h3>
  The tractors we sell are state of the art farming machines.
  They're all painted green, which is the best color available,
  and they guaranteed to never break down!
<h3>What do our customers say?</h3>
<h5>Cindy Stevenson says:</h5>
<p>"We just love the tractor we bought at Bob's, it's the best!</p>
<h5>Grumpy Joe says:</h5>
<p>"Get off my lawn, ya no good hippie!</p>
<h3>Contact Us</h3>
<p>Bob's Tractor Store</p>
<p>123 Fake Street</p>
<p>Farmville, ZB 99999</p>
<h5>(123) 456-7890</h5>

And here’s the web page that this HTML code creates:

Linking Two Webpages Together

Now that you’ve made your first webpage, let’s learn how to create a link on the webpage and link it to another page. To do this we need to learn a third type of HTML element, the Anchor element. We create an Anchor element with tags that have names with the letter ‘a‘. Like this: <a></a>

Now if we simply create an anchor element with content inside of it like the paragraph or heading tags, it will appear that nothing has changed. Go ahead and try to do this in your Notepad:

<a>This is a link</a>
It looks like we’ll need something more to create a link…

It makes sense that we need some way to specify what our anchor element should link to. For this, we need to give it an attribute.

Our First HTML Element Attribute: href

Attributes take the form of attribute=”value” and they are added to the opening tag of an HTML element, just after the element’s name. For each type of HTML element, the web browser knows about a set of attributes that are valid for each one. Some attributes are only valid for certain HTML elements. We will cover many more in the next article.

In this case, our anchor tag needs the href attribute added to its opening tag. “href” stands for ‘hypertext reference’, and it’s used to specify where we’d like our hypertext to link to when it’s clicked.

The href attribute accepts a couple of different types of values. Here, we can set the value to be a URL of a website that we’d like the link to go. For example, here’s an anchor tag that links to the Google home page:

<a href="https://google.com/">Google</a>

In plain English, you can read this code as: “This is an anchor tag with a hypertext reference to the URL ‘https://google.com/’ with the content text of ‘Google'”.

Go ahead and add this link to that first HTML document we created in Notepad/TextEditor. When this <a> element is added with the given href attribute with the value https://google.com/ and the document changes are saved, your first webpage will have a link that navigates to Google when clicked:

Your first anchor element link!

Now, let’s try linking two of your own web pages together. To do this, instead of using the URL ‘https://google.com/’ in the href attribute’s value, we’ll use a file name instead.

Step 1 – Create the Home Page

Create a new HTML document in Notepad by pressing the CTRL+N keys together or clicking the File option from the toolbar and selecting the New option.

File > New

In this new HTML document, let’s add an <h1> heading element that reads “Home Page”. Feel free to add your name, your pet’s name, or a stranger’s name here: “Bob’s Home Page”.

Next, add an anchor element with a href attribute that has the value “about.html” and the word ‘About’ in the content of the element. This is a reference to another HTML document we’ll create and link to.

Save this HTML document as ‘home.html’, making sure to set the “Save type as” to “All Files (*.*)” like before.

The home page of your first website

Step 2 – Create the About Page

Now we’ll create the About page. In the same file, add an <h2> element that reads “About Jimmy Job Bobson”. Modify the href attribute value in the anchor element to be “home.html”.

Use the “Save As…” option in the File menu of the toolbar or press the key combination “CTRL+SHIFT+S” to open the Save As window. Change the “File name” field to ‘about.html’, and again make sure to set it as All Files (*.*).

NOTE: Make sure you save the ‘about.html’ in the same place as the ‘home.html’. They have to be in the same directory or folder for the links to work!

Now you should have a webpage and HTML document that looks like so…

The about page on your first website!

Now try out the links on the home.html file

Some Next Steps

Practice with experiments and exercises

Alright, now that you have your first tool (Notepad) and your first building blocks (paragraph, heading, and anchor elements), it’s important that you practice and experiment. In the next article, you’ll learn more about how to structure your pages, but if you can discover some things on your own, you’ll learn faster and remember more. Make some changes to the HTML documents we’ve started, remember to save the files as you change them, and refresh the web pages to see what those changes did. Do this several times and explore on your own. Here are some ideas:

  1. In one of the HTML documents you’ve made, change the paragraph tags (<p>) to be heading tags (<h1>, <h3>, <h5>, etc.) and vise-versa. See how the sizes change and get a feel for how things look.
  2. See what happens when you include text that isn’t inside a HTML element.
  3. Try adding some spaces and newlines within the HTML elements, try adding some between the elements. What happens?
  4. Add some more headings of different sizes and see how they look.
  5. Add some links to your favorite websites, see what happens when you leave out the value in the href attribute or misspell the URL in the value.
  6. Create a few web pages of your own and create links between them all. Try making one main home page that has links to three other pages, with each of those other pages containing a link back to the home page.

Challenge Exercise

Alright, if you’re really getting into this and you want to start things off with a little challenge, let’s start making an online store!

Think of a company you know or make up a fake company, it could be a well known brand like “Nike shoes” or “Gibson guitars”… or maybe a fictitious company like “Spacely’s Sprockets” or “Jimbob Jeans”. Create a 5-page website for that company that includes the following pages with some content in it like this:

  • (Header) Every page should contain the following at the top of the page:
    • The company name in the largest heading
    • The company’s slogan in a smaller size
    • Anchor links for each of the pages on the site
    • A sub-heading with the page’s name, like “About (CompanyName)” or “(CompanyName) News”
  • (Footer) Every page should contain the following at the very bottom of the page:
    • A copyright statement in small text
    • Links for social media pages for the company, don’t worry if they don’t actually exist
    • 3 links for optional pages “Privacy”, “Accessibility, “Sitemap”, and “Terms of Use”
  • ‘News’ page
    • Include a few sections with smaller headings and paragraphs that describe some simple articles for recent company news.
    • (optional) Link each section to a unique page that includes a full news article.
  • ‘About’ page
    • Include a few paragraphs that describe the history of the company and some frilly descriptions that make the company sound socially responsible and trustworthy
  • ‘Contact’ page
    • Include a paragraph that describes how important the company values its customers opinions.
    • List the company’s address, customer service phone number, and a contact email.
  • ‘Products’ page
    • Create a few headings with product names and a paragraph under each that describe the product
    • With each product provide some link to buy the product, these don’t need to link to anything yet.
  • ‘Events’ page
    • You get the idea, headings with event titles, paragraphs for each that describe the event
    • Each event should include a link to book tickets or for more information, they don’t need to link to actual pages yet.

If you can get through making these pages as described, you’ve gotten a head start on the final project for this series of articles, but more importantly, you’ve gotten practice with creating HTML at a basic level. Do only as much as you care to, it’s just important that you grasp the concepts described so far!

Read some other HTML articles and tutorials

Once you’ve experimented a little, try browsing around some other sites on the topic to get more insight. I can’t possibly include everything there is to know about getting started with HTML, and there are far more knowledgeable people out there who’ve made some great learning material on the subject. So, before moving on I encourage you to spend some time searching around the internet and reading some other material. Here are some resources I recommend checking out, bookmarking, and referencing later:

FreeCodecamp [ https://www.freecodecamp.org/ ] – This is, by far, the most comprehensive and interactive website you will ever find for learning how to create websites and learn to code. As the name suggests, it’s completely free. It includes hundreds of exercises that take you from introductory to advanced topics and I highly suggest anyone interested in the topic, of any skill level, spend time working through their courses.

W3Schools [ https://www.w3schools.com/html/html_intro.asp ] – This site is a wonderful reference when you’re learning the basics of numerous web topics and programming languages. Their HTML-related pages include a straightforward introduction, and you’ll see a long list of topics on the left side of their page that helps explain most entry-level topics. Each code example they have gives you the opportunity to try experimenting with the code in their own code editor.

Mozilla Developer Network [ https://developer.mozilla.org/en-US/docs/Learn ] – Mozilla, the company that produces the Firefox internet browser, provides some awesome guides and tutorials that guide you through everything you need to know when it comes to web development. Beyond that, they have a huge amount of reference material that you will find useful for many years into your career in web development.

StackOverflow [ https://stackoverflow.com/ ] – StackOverflow is a Question/Answer community that’s focused on programming and software development. It’s a running joke in the web and software development industry that a huge part of learning and working with code involves referencing StackOverflow. That’s not far from the truth. The more you get into coding, the more you’ll realize that when you run into a problem and you’re searching the internet for assistance… the majority of the time, you will find your solution on StackOverflow.

Codecademy.com [ https://www.codecademy.com/learn/learn-html ] – Codecademy is a fantastic learning platform with dozens of courses on programming. The HTML course I linked here is free, you just need to make an account to use it. Their courses will give you plenty of useful information to get started on many code-related topics. They are primarily a paid service, and their subscription fee is a little pricey, but there’s no harm in using their free courses to start learning today. Their format is similar to Freecodecamp in many ways, but tends to incorporate more videos, external articles/sites, and books to study. I’ve held a subscription with them for a few years and I can confirm their learning paths are top-notch and cover a lot of great content. (No, I’m not getting paid by them to say that.)

….and more. These five sites are only the tip of the iceberg. Truly, there are countless platforms and websites out there which provide an abundance of information about HTML and web development. Just try Google searching phrases like “learn html” or “html tutorial” and check out what the internet has to offer. Many of them are free, but some of them cost money in the form of a subscription or a flat fee. Just remember that it’s not advisable to invest any money if this is your first year working with HTML, there are so many free options that provide everything you need.

Wrap Up

In this article we talked about some important HTML fundamentals, here’s the review:

  • What’s HTML? HTML stands for HyperText Markup Language, which is what all websites on the internet are made from.
  • What’s HyperText? HyperText is what links webpages to one another. It’s what makes it so that when you click a link on one web page you’re brought to another web page.
  • What’s Markup Language? Markup Language is a style of annotating text in a document to help provide structure to it’s contents.
  • Internet and Web Browser: When you use a web browser program on your device and type a URL (or website address) into the address bar, the browser contacts the webserver for that website and translates the HTML document for that website into a visible interactive web page for you to use.
  • Viewing HTML on any website: You can see the HTML for most websites you visit by right-clicking it and selecting ‘View Page Source’.
  • HTML Tags: An HTML tag is made up of an opening angle bracket, the name of the tag, and the closing angle bracket
  • HTML Elements: An HTML element can made up of an opening HTML tag, some content you’d like displayed on the web page, and a closing HTML tag, in that order.
  • Paragraph Elements: The first type of HTML element we learned about was the paragraph element, <p>. This tag can help organize your text into paragraphs.
  • Heading Elements: The second type of HTML element we learned about were the heading tags, <h1> through <h6>. These tags range in size and can help organize the titles on your web page. They can also help break the content in your web page into sections.
  • Anchor Elements: The third type of HTML element we learned about was the anchor tag, <a>. Along with the href attribute with a URL or filename as the value, the anchor tag will create a hyperlink on our webpage that loads another webpage in our browser when clicked.
  • Our First HTML Element Attribute: In order to help our Anchor elements know where to link to, we got a glipse at our first Attribute. Attributes take the form of [ name=”value” ], and they’re always added to the opening tag of their HTML element. We’ll cover many many more attributes in this series, this was just the first taste of their usefulness.
  • Creating a Webpage: We saw how to create a simple web page using a text editor like Notepad or TextEdit, and that we shouldn’t try to use a word processor like Microsoft Word or Pages to do that.
  • Experiments: We saw a few ways we can experiment with changing our simple web page to learn more about how HTML works.
  • Challenge: To really put you to the test and give you a proper amount of practice, a challenge to start working on an online store site. This includes creating a 5 page website with all the major components of a standard traditional business website.
  • Resources: We checked out some awesome resources like W3Schools, MDN, and Codecademy which can provide tons of interesting learning content and reference material as we move forward.

In the next article, we’ll download and install our first code editor, then we’ll learn a variety of HTML tags that help organize the code of our web page.

Continue to HTML Tutorial #2: Editors and Structure >

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.