If you want to learn web development but don’t know where to start, HTML is likely to be your new best friend pretty soon. It’s one of the first things you’ll learn if you want to become a web developer. Luckily, it’s not hard to get the hang of once you try it out, and can be a lot of fun to learn. The first step is to prepare yourself with some basics, and pretty soon you’ll be able to dive right in and start coding!
HTML, or HyperText Markup Language, is the language used to create and organize web content. It’s the basic building block that allows you to make your own websites from scratch. HTML documents are simply plain-text files with .html extensions.
You can create these files using a default program like Notepad (Windows) or TextEdit (Mac). However, downloading a text editor like Sublime Text is recommended because it has features that make organization and navigation of your code much simpler.
Sublime lets you write color-coded HTML and has keyboard shortcuts specifically intended for HTML documents. You can also customize formatting and appearance, to have a work environment that’s tailored to your personal preferences. There are all kinds of editors like Sublime that can be downloaded for free.
Sublime Text TextEdit
In Sublime Text, a project folder for a website might look something like this:
This root folder (called ‘demosite’) contains all the documents of the website, organized in a tree structure. A tree structure is simply a way of arranging files in successive subdivisions. Depending on the complexity of a website, a root folder may contain many folders one inside the other, or it might have only a few folders of documents.
For now, we’ll focus on the index.html file which is always the website’s main page, and is a required file for all websites. This is where we’ll start writing HTML.
What Happens In Your HTML Document?
First, every HTML document needs to have the following HTML tags in order to function.
HTML tags < > are the basic unit of HTML. They tell the browser how to format and display content (headlines, images, links, etc.) on the page. Most HTML tags have an opening tag < > and a closing tag </ >.
<!doctype html> - Tells the computer that the document type (doctype) it’s looking at is an HTML page. This goes at the top of your HTML file.
<head> </head> - Contains information about the document that is not visible on the page. You can apply different styles, fonts, and other external information to your HTML by adding various types of links inside this area. For example:
Meta tags - Meta data describes basic information such as your website’s title, author, content, and character set (as described below).
Style sheets - Style sheets are templates that can be applied to HTML in order to change the appearance and layout of the HTML content. You can create your own style sheets using the language CSS (Cascading Style Sheets), or link to external templates. (more on CSS later)
<meta charset=“UTF-8”> - A meta tag located in the header section that specifies the character set (charset). This information is necessary in order to display HTML correctly on a browser. It defines the alphanumeric characters that could be displayed on the internet.
Here, it’s set to UTF-8. UTF-8 is the character set for most of the web because it supports almost all characters and symbols. Older character sets like ASCII, ANSI, and ISO-8859 aren’t able to recognize as many characters, which could cause your HTML text to appear incorrectly on a browser.
<title> </title> - Whatever you put here will show up as the title of the website on the tab of your browser. This is contained in the header section.
<html> </html> - Identifies the beginning and end of your file, and encompases the entire document.
<body> </body> - Everything inside the body of your HTML file is your webpage content that appears on the browser
In a HTML document, it’s arranged like this:
You can see how the document begins and ends with the HTML tag, and inside that area you have the header (information not visible on the webpage) and the body (viewable content). Here, the opening HTML tag also includes the language code “lang=“en””, which specifies English (en) as the language of the text in the webpage.
** ** Some common HTML tags you’ll use for website content:
<div> </div> - create separate sections of content
<h1> </h1> - headline (there’s also h2, h3, h4, h5, and h6 for subheaders)
<p> </p> - paragraphs
<ol> </ol> - ordered lists
<ul> </ul> - unordered lists
<li> </li> - each list item
<em> </em> - this tag italicizes your text
<strong> </strong> - makes the text bold
Although less common, you’ll also come across stand-alone elements. These are also referred to as self-closing tags, which don’t require an end tag** :**
<img> - add an image
<br> - line break
Try It Out!
Let’s see what some of these tags actually do. Once you know how to use a few of them, you’ll be able to apply the same principles to all kinds of other HTML elements.
Let’s just start by adding a headline to the page.
To view your HTML code in action, you can open up the file in a browser like Chrome, Firefox, or any other browser of your choice. The code above will give you:
As mentioned, each tag tells the browser to format the content in a particular way. Take a look at the difference between <h1> and <h2> headlines.
This gives you:
How about adding a picture? Remember, image tags are stand-alone so they don’t have a closing tag at the end.
The first “img” signifies an image tag, followed by “src”, which specifies the URL for the image. Inside the quotes, you have the name of the file including its extension. The “img/” directs the link to your project folder’s image folder where this picture is stored.
One more example. We can use an unordered list to give a description of our picture. An unordered list <ul> will display each list item <li> with bullet points.
This is obviously a very simple web page. When you’re building your own sites, you’ll be able to apply the same principles to make much fancier pages than this. Plus, you’ll be using CSS to modify the style and format of your elements.
CSS (Cascading Style Sheets) is the language that accompanies HTML, and is responsible for defining the style of HTML content. The “cascading” part means that in a CSS file, the style located lowest in the document will be the one applied, if there are two styles that conflict.
A few quick notes to keep in mind:
The code you see here shows how HTML elements are organized in a nested structure , one inside the other. In this demo, for example, we have an unordered list <ul>, where each list item <li> is contained inside the <ul> element. In order for each list item to be defined as a part of the unordered list, it must be inside the <ul> element.
Whenever you begin a new level in the nested structure, always indent that element. This keeps your code organized so you can keep track of everything.
Remember to close all tags! Aside from the few self-closing exceptions (like <img> and <br> mentioned earlier), it’s super important that none of your elements are left without their end tags.
We have a web page… but it’s got no style!
So far, all we have here is a plain HTML page. And of course you’ll probably want to make websites that are way cooler looking than this demo. When you move on to learn CSS, you’ll be able to create your own CSS files that can be applied to an HTML document.
As mentioned earlier, CSS is the language used to format and stylize your HTML content. It will allow you to change the colors, fonts, positioning, and behavior of the elements on your page. (Just to name a handful of things you’ll be able to do with CSS.)
This Is Just The Beginning!
There’s a whole lot more you’ll be able to do with HTML beyond what you see here. And if you want to go even further with your web development skills, knowing HTML will help open the door to learning a variety of different coding languages. So if you’ve got some of these basics under your belt, you’re off to a great start!
[Know somebody who wants to become a programmer and learn HTML? Share this article with them using the toolbar to your left!]