HTML in 10 Minutes.
Up and running with HTML in 10 minutes.
HTML stands for HyperText Markup Language.
As you can see from its definition, it is not actually a programming language, but HTML is a markup language. We will see more about the HyperText part later in the tutorial.
Every website on the internet uses HTML one way or another and understanding HTML will give you a fundamental understanding of how the websites you see everyday are created. Chances are you probably have heard about the trinity of the front end web development: HTML, CSS and JavaScript. Right now, you can create a website using just HTML. It may not be super pretty or interactive necessarily but you can totally do it. In later tutorials, we will use CSS and JavaScript to make our websites look nicer and more functional. But for now, HTML is a pretty good starting point in order to have a full understanding of the web.
In a nutshell, HTML is used for structure and content of the website, whereas CSS is used for the style of the website so that it looks pretty and JavaScript is used for interactivity and functionality.
One of the first questions that you might have is that where will you actually write your code? You might have heard many text editors or IDEs (which stands for Integrated Development Environments) and it all may seem confusing out there, and you are totally right.
At the end of the day however, you should know that all of those text editors or IDEs are just tools to help you write better code with more ease. That’s why when you are just starting out it’s probably a good idea to start with a simple tool that help you write the code, so that you can focus on actually learning the language and the programming logic related to it. For that exact reason, in this tutorial, we will use an online coding tool that requires no set up so you can get started within seconds. Without further ado, let’s dive into your first HTML code so you can create your first website within minutes.
Getting Started
Head over to codepen.io and click on “Start Coding”. It is free and requires no sign up. You can search for codepen.io on google or click on the link below for your convenience:
Once you head over to the website it should look like this:
Go ahead and click on the “Start Coding” button on the top left side.
Now you should be looking at something exactly like this:
CodePen as you can see has a pretty intuitive design. We have the coding area at the top and your resulting web site will display at the bottom of the screen. When you first open it up, rather than showing you a blank screen, they usually show you a programming joke, which will go away once you start coding.
In this tutorial we will just code in HTML and we won’t use CSS or JavaScript for now. So we can click on the downward arrows next to them and click on “Minimize CSS Editor” and “Minimize JavaScript Editor”. Now we have a large HTML code editing area where we can comfortably code in.
In the very first line of an HTML document, we should write the version of HTML we are using. In HTML 5, we can achieve this with the following line:
<!DOCTYPE html>When we write code in HTML, we write that code in a document called a html document. This is just like other documents you use during the day. For example, if you are using Microsoft Word documents, it ends with a “.docx” extension and the HTML documents end with “.html” extension.
This document we write is sent to the browser we want to display the website in and the browser reads the html document line by line and displays its contents. Now that we have typed “<!DOCTYPE html>”, let’s type two html tags as can be seen below. And we will write all of our code in between these two html tags:
<!DOCTYPE html>
<html></html>
Unlike JavaScript or other programming languages, HTML is not a programming language and it does not have complex programming logic. In HTML, what we do is to mark up some parts of the document we write so that they have different structural behaviour. This will make more sense as you are coding along. We create most of the structure of the website using what is called “HTML tags”. Most tags have an opening and a closing tag just like the <html> tag we just used. Between the opening and the closing html tags is where we will write our html code to structure our website.
There are two main parts to an HTML document. The head and the body part. In a nutshell, the head part is where we will have relevant information about our website to make it fully functional and reliable. Whereas in the body part of the HTML document, we will create the actual structure of the website. So all the code “about the website” will go into the head part and all the code that forms the actual “structure of the website” will go into the body part.
<!DOCTYPE html>
<html> <head>
</head> <body>
</body></html>
Whether you are coding in an online text editor or an IDE, there are parts in HTML called a “boilerplate code” that you have to write every time you code in HTML. That’s why as a quick google search will usually show you the keyboard shortcut to create that boilerplate code in whichever environment you code in. In most cases however typing “!” or “html” and pressing “tab” or “return” key should give you a pretty basic boilerplate code for HTML.
In CodePen, we can type an exclamation mark,
then press tab to autocomplete the whole boilerplate code like so:
One of the first things you should know about this code is that you don’t have to understand everything about it just yet. For now, we can take a look at it line by line and try to get an overall understanding.
The first line as you can see tells the type of HTML version we use, for HTML 5, it is simply written as: <!DOCTYPE html>.
In the second line, we have the major html opening tag which will enclose all the html code we write. We also tell the browser that this HTML document uses English as a language. This pairings of keywords to add additional information about a tag is called an “html tag attribute”. This basically means that on top of using the tag, when we want to give more information about a tag, we write it in key value pairs. The way to do that in HTML is in the following format: after the “<” sign we type the “tag name”, then we leave a space and enter the “key name” such as lang for language in this case, then we type an “=” and we enter the “value name” inside quotation marks and finally we close the opening tag with a “>”. As a result, in practice it looks like this:
<html lang="en">If the format is unfamiliar, do not worry it is pretty easy to get used to once you write it a couple of times and it will become a second nature after a while. For now, let’s see what else we have in the boilerplate code that we have.
On the next line we have the “head” tag’ which includes multiple important information about our website. Some of these important informations are denoted with a “meta” tag as they contain “meta” information or higher level of information about the website. One of the main one being the “charset”. With charset or the character set, we tell the browser what kind of “character encoding” we use in our website. One of the most popular and the standard way is to use the “UTF-8” encoding. Writing this line helps ensure that people viewing our content all over the world from different countries and languages are using the right kind of encoding to view our website. You will see two more meta tags right under this one and they are also there to make your website display more reliably.
On the next line, we have the title for the website. This is the part that will show up in the search engines and also at the top of your browser if you open the website in a separate tab. Let’s move to the body tag so we can code the actual contents of the website.
Hello, World!
Between the opening and the closing “body” tag, let’s write our hello world code like so:
<h1>Hello, World!</h1>
The “h1” tag in here is used for titles or headings hence the short hand name h1. You can adjust the size of the text by using a range between 1–6. 1 being the largest text size and 6 having the smallest. It usually helps to see them all at once for scale.
Common HTML Tags
Paragraphs
If there is something you will use other than titles or headings, it is probably a paragraph. In HTML, you can create a paragraph element with a “p” tag like so:
Lists
In HTML there are two major kinds of lists you can create. Ordered and unordered lists. Ordered lists are the ones that has some organizational structure like a numbering system or even using letters in order for each element in the list. You can create an ordered list with the “ol” which is short for “ordered list”. Then, inside the “ol” tag, you can list your items like so:
Unordered lists are pretty similar to ordered lists, however, they do not have any ordered component to their items like any numbers or letters. By default, they will have bullet points before the list element. You can create an unordered list with a “ul” tag which is short for “unordered list” and then inside the ul tag, you can nest the list items in “li” tags like so:
The HyperText Part
Yes, it is finally the time to unlock the “HyperText” part of the HyperText Markup Language. The term hypertext initially referred to a text document that is connected to other text documents through what is called ‘hyperlinks’. This way you could click on certain texts and that would direct you to other text files. If you take a closer look to the beginning of the websites you visit, the “http” part before any website is actually a short hand name for “Hypertext Transfer Protocol” and similarly the modern “https” stands for “Hypertext Transfer Protocol Secure”. Therefore HTML is a markup language to connect different documents, and http is a standard way to transfer documents across the internet. HTTPS as you can guess is a standard way to transfer hypertext files and it uses encryption to make the transfer protocol more secure.
Using the “a” tag we can link to a variety of documents. In order to do that, we should use the attribute of href and give it the value of the link path we want to direct to. We can not only link the viewer to different html documents or to different pages of our website but we can also direct them to external websites or they can be linked to files such as image or video files. Let’s see that with an example and send people to youtube when they click on some text that says “Go to YouTube”.
Where to Go From Here?
Now that you have some understanding of HTML, it’s probably a good idea to briefly see the other two parts in the front-end trinity. This way before diving further into web development, you will give yourself the chance to see the big picture first and thus have a fundamental understanding of the main elements in web development from the very beginning. Make sure to follow if you don’t want to miss out on the other two of the front-end trinity articles to come as well as more tutorials on web development.
