Introduction to Web Programming: HTML Review

Believe it or not, the web isn’t just magic. Behind the scenes, HTML serves as the structure of almost every page on every website you visit, telling web browsers what content should be on a page and in what order.

If you want to create a website, or if you work on websites in any way, knowing the basics of HTML is essential. Learning HTML (and its sibling language, CSS) opened up opportunities for me to create, design, and help manage websites — it made me stand out and have the career I have today. My goal is to help you do the same.

Download Now: 25 HTML & CSS Hacks [Free Guide]

In this guide to HTML for beginners, I’ll explain what HTML is, what HTML is used for, and how to code some basic HTML. We’ll end with a brief look at some resources you can use to continue learning and using HTML.

Let’s get started.

HTML is used by 96% of all websites and probably all of the ones you use on a regular basis.

HTML is an acronym for “HyperText Markup Language.” Allow me to break this down:

First, “HyperText” is text on a web page that references another web page. You probably know these as hyperlinks, such as this one. Hyperlinks typically bring us to a different web page or a different section of the same page. Hyperlinks can also open a PDF, email, or multimedia, like a video or audio file.

Linking information together via hypertext was revolutionary in building the web we know today. When you’re “browsing the web,” you’re just clicking hyperlinks that take you to different web pages. Even if those pages are more complex and dynamic, like on a social media site or web application, at their core, these are all just HTML documents that display information.

I realize that’s not very compelling, so I’ll put it this way: Hypertext makes it possible for anyone to access all types of information around the world in any order they want.

Moving on, “Markup” refers to how HTML “marks up” the page with annotations within the HTML file. These annotations are not displayed on the web page itself. Instead, they work under the hood, telling the browser how to display the document to visitors. We’ll soon learn more about how this markup works.

Finally, “Language” is the simplest part of the acronym to understand. Like any language, HTML has an alphabet and is used to communicate information. HTML is a coding language, which is different from natural languages like English or Spanish. So, how do we use this language? That’s next.

What is HTML used for?

HTML is used to create web pages. When you view a web page in a browser like Google Chrome or Safari, your browser has parsed an HTML file and is displaying visual elements like text, buttons, and images based on the contents of that file.

With HTML, you can make a web page show text, lists, images, videos, buttons, forms, and a lot more. Plus, you can add hyperlinks to other pages, allowing visitors to easily navigate your website and jump to other websites.

HTML is used to create things other than web pages, too. You can also use it to make:

• emails
• web forms
• ebooks
• custom HTML modules in a CMS or a website builder
• mobile and web apps
• data tables and visualizations

If you want to make any of these things, it helps to know how to code HTML. So, let’s cover that next.

How to Write HTML

Compared to other coding languages, HTML is easy to read and understand since it’s essentially plain English text with extra symbols.

The main building block of an HTML file is an element. An HTML element is a component that defines a piece of content or a section on a web page. An element could be a piece of text like a paragraph, an interactive component like a button, or a section of the page like a header or footer.

Here’s what a basic element looks like written out in HTML. This element is called the p element, which stands for paragraph. It’s the most common element we use to display text on a page.

Let’s take a closer look at each component of this element.

Start Tag

HTML elements are designated by tags. For most elements, the start tag (or opening tag) and end tag (or closing tag) mark the beginning and end of an element, respectively. The opening tag contains the name of the element (in this case, p for paragraph) enclosed in angle brackets (<>).

A start tag may also contain additional information called attributes. I’ll cover those in more detail later soon.

Also, element names are case-insensitive. For example, the <p> tag can also be written as <P>. However, I recommend writing in exclusively lowercase — that’s what you’ll see in almost all HTML.

Content

The content of the element is placed between the opening and closing tags. This is what the user actually sees on the webpage. An element’s content could be text, a link, an image or other multimedia, a list, or a table. It can also contain other elements — we’ll touch on this soon.

End Tag

The end tag defines the end of the HTML element. Like the start tag, it contains the element name. The difference is that a forward slash (/) precedes the element name.

Most HTML elements have a closing tag. However, some HTML elements only have an opening tag. For example, <img> (image) and <br> (line break) do not require closing tags. Elements with only a start tage are called empty elements.

These three things — a start tag, an end tag, and content between them — are all we need to make a paragraph. In the code module below, you can see the HTML code written on the left side and the rendered HTML (i.e., what the user sees in the browser) on the right.

Notice how you only see the content in the rendered HTML, and the tags are hidden. Try adding some more paragraphs to the code above and seeing how they look when rendered on the page.