What is HTML? A Beginner’s Guide

Essentially, HTML is a basic programming language used for creating websites. If you’re considering a career in web design or development, knowing this language is an absolute mustbut even in other professions, like digital marketing, a bit of HTML can come in handy.

Once you’ve got the hang of it, writing and working with HTML is a breeze. If you’ve never touched it, however, it can seem like one of the internet’s biggest mysteries.

In this post, we’ll provide the ultimate introduction to basic HTML.

Before we start, don’t panic. This guide is aimed at anyone and everyoneno tech knowledge required!

Ready to get started with HTML? Let’s go.

  1. What does HTML mean?
  2. How does HTML work?
  3. Writing HTML: The basics
  4. Learning HTML: What next?

A web developer sits at their workstation, looking at HTML code and markup on two screens.

1. What does HTML mean?

HTML stands for Hypertext Markup Languageand, as previously mentioned, it’s a computer language used for the creation of websites. HTML describes how a document should be displayed by an internet browser. It was created by physicist Tim Berners-Lee in the late 1990s and, like all programming languages, has been continuously revised and updated over the years.

Hypertext

This is basically text that contains links to other texts. You can click on these links to jump to other pages or sections of text.

Markup

This part refers to HTML tags and the text inside them. We’ll talk more about tags later.

Language

Finally, HTML is a languagepretty self-explanatory, right?

2. How does HTML work?

Quite simply, HTML works by telling the internet browser how to display the page.

First, the author uses a basic text editor on the computer (such as TextEdit for Mac) to create their HTML document. The author then fills their HTML document with a series of HTML elements, using HTML tags.

What are HTML tags?

Essentially, HTML tags are markers which tell the browser how the enclosed text should be displayed. Here’s a simple example:

<b>This text should be bold.</b>

In this case, <b> and </b> are the HTML tags. They are marking the enclosed text as “bold”hence, the “markup” element of HTML. We’ll explain how to actually write tags in the next section.

Once the document is complete, the author saves it as a html file and opens it in their internet browser. The browser then reads the file and follows the instructions to render the page in a certain wayas provided by the HTML tags.

So, when you use the “bold” tags, you’re essentially telling the browser to display this sentence in bold: <b>This text should be bold.</b>

When the browser reads this, it knows to display the sentence as described: This text should be bold.

Of course, the HTML tags themselves are not displayed in the browser (unless you make a mistake writing them!).

3. Writing HTML: The basics

Tags

HTML tags are written inside angle brackets, and tend to come in pairsso, they consist of both an opening and a closing tag.

For example, the <p> tag is used to indicate a new paragraph. The opening tag is written as follows: <p>. After this tag, you write your paragraph. To finish, add your closing tag, which is the same as the opening tag but with a forward slash. In this case, it would be: </p>.

A pair of tags with text enclosed is known as an element. Here are some examples of common HTML elements and their corresponding tags:

<h1>This is a heading</h1>

<p>This is a paragraph</p>

<b>This is a bold sentence</b>

<i>This is an italic sentence</i>

Most HTML tags follow this open-and-closing pattern, but there are also some tags which only need an opening tag to be valid. These are known as singleton tags, and include things like <br> to indicate a line break, and <img> for including an image. The browser will understand and act on these tags without the need for a closing tag.

Attributes

You can also assign attributes to your HTML elements. Attributes provide extra information about the text contained within the tags. For example, if you wanted to hyperlink the phrase “my website” in your HTML document, you would first use the tag pairs <a> and </a> to specify that the text should be linked. To tell the browser where the text should be linked toi.e. the link addressyou use the href attribute. Attributes, like the text, are always enclosed within the tags:

HTML: <a href=”https://www.google.com”>My website</a>

Displayed as: My website

This is just a very simple introductionyou’ll learn more about attributes as you delve deeper into HTML, but for now we’ll stick to the very basics.

Writing a HTML document

When writing your HTML document, you need to tell the browser that it’s dealing with a HTML fileotherwise, it won’t be able to display the page. Each HTML doc must therefore contain the <html> and <body> tags. Don’t forget to close these tags at the very end of the document!

Here’s an example of what your HTML document might look like in the text editor:

<html>
<head>
<title>This is the title of my html document</title>
</head>

<body>
<h1>This is a large heading</h1>
<p>This is the first paragraph.</p>
<b><p>This is the second paragraph, which will be displayed in bold.</p></b>

</body>
</html>

To make sure that you’ve written your HTML correctly, you can use the W3schools Tryit Editor tool. Simply enter your HTML and click “run” and you can see how your HTML would be displayed in the browser.

screen shot 2018 03 16 at 1 32 34 pm x 1423 283x

4. Learning HTML: What next?

There’s loads more you can do with HTMLfrom embedding images to defining the styles and colors of different page elements.

When it comes to creating professional, fully functional websites, HTML goes hand in hand with CSS and JavaScript. CSS stands for Cascading Style Sheets, and is used to style the HTML elements of your webpage. JavaScript is another programming language which enables you to introduce interactive elements to your basic webpage. Together, HTML, CSS and JavaScript form the foundation for standard web technologies.

Before moving on to the more complex topics of CSS and JavaScript, make sure you’re completely comfortable with HTML. W3schools provides a comprehensive guide to each and every aspect of HTML, and you can also complete practice exercises and take their HTML quiz to check your progress.

Ready for more? Check out some of these articles:

What You Should Do Now

  1. Get a hands-on introduction to web development and build your first website from scratch with our free, self-paced Web Development Short Course.

  2. Take part in one of our FREE live online web development events with industry experts, and check out recent graduate Tanimara’s successful career-change story.

  3. Become a qualified web developer in just 5-10 months—complete with a job guarantee.

  4. This month, we’re offering the first 100 students a partial scholarship—worth up to $1,425  off—on all of our career-change programs 🎉 Book your application call and secure your spot today!

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.

Learn more about our programs