HTML is a basic programming language used for creating websites. If you’re considering a career in web design or development, HTML knowledge is a must - but even in other professions, like 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.
HTML was created by physicist Tim Berners-Lee in the late 1990s, and has been continuously revised and updated over the years. In this post, we’ll provide the ultimate introduction to basic HTML.
This guide is aimed at anyone and everyone; no tech knowledge required!
Ready to get started with HTML? Let’s go.
What does HTML mean?
HTML stands for Hypertext Markup Language - and, 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.
Hypertext is basically text that contains links to other texts. You can click on these links to jump to other pages or sections of text.
The Markup part refers to HTML tags and the text inside them. We’ll talk more about tags later, but here’s a quick 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.
Finally, HTML is a language - pretty self-explanatory!
How does HTML work?
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. As we saw before in the markup example, tags determine how the enclosed text should be displayed - we’ll explain how to 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 way - as 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>Please make this sentence bold!</b>
When the browser reads this, it knows to display the sentence as described: Please make this sentence bold!
Of course, the HTML tags are not displayed in the browser.
Writing HTML: The Basics
We know that HTML tags tell the browser how the enclosed text should be displayed - but how do you write these tags?
Tags are written inside angle brackets, and tend to come in pairs - so, 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.
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 to - i.e. the link address - you 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 introduction - you’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 file - otherwise, 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:
<title>This is the title of my html document</title>
<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>
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.
Learning HTML: What next?
Ready for more? Check out our Beginner’s Guide to the 10 Most Popular Programming Languages.
What You Should Do Now
- If you’d like a step-by-step intro to find out if web dev is right for you - sign up here for our free 7-day web dev short course.
- If you are interested in becoming a Web Developer check out our web development course (you'll learn the essential skills employers need).
- If you’d like to speak to an expert Career Advisor for free about how you can really get a new job in tech - connect with us here.
If you enjoyed this article then so will your friends, why not share it...