Our Blog

If you’re building a house, you don’t start by gathering paint. Instead, you grab the bricks and mortar you need to construct a strong foundation. In professional web development, HTML (HyperText Markup Language) serves a similar purpose to the bricks and mortar of a building. No matter how fancy your website might be, you need it to craft a sturdy underlying structure. 

Today, HTML knowledge is necessary for anyone who wants to build, manage or improve websites — from professional developers to marketers and small-time business owners. In this article, we’ll cover HTML basics and explain what you need to know about the language before you start learning. We’ll also spotlight a few careers where HTML knowledge comes in handy and map out your timeline for achieving proficiency in the language.

What Is HTML?

HTML, which stands for “Hypertext Markup Language,” is the language used to create, structure and design websites. The term “hypertext” refers to HTML’s ability to link out to relevant content. As a markup language, tags are used in HTML to define the overall structure and layout of a webpage, as well as the content elements within it. 

At its most fundamental level — before extra styling and dynamic elements are applied — HTML tags tell your web browser what to display on the screen and in what order. When coding for the web, you wrap or enclose different parts of your content to ensure that it appears where, when and how you want. Basic HTML tags can determine font size as well as basic formatting choices such as bold or italics. 

While the kind of content, design and dynamism that we see on the web has changed dramatically over the past few decades, HTML has remained the fundamental framework that powers web design. Even dynamic websites generated by more advanced scripting languages such as Javascript or PHP rely at least in part on HTML. This is why learning to code in HTML continues to be essential for web developers.

History of HTML

HTML was first invented by Tim Berners-Lee in 1993, though the language was not widely used until 1999, when HTML 4.01 became an official standard for web development. In 2012, the language was updated into HTML5, which offered expanded capabilities. 

Interestingly, modern HTML codebases tend to be shorter than early ones. Many of the design and interactive elements that developers used to code manually are now handled with CSS (Cascading Style Sheets) or JavaScript.

HTML Basics

Not sure what you need to know about HTML before you learn? We’ve got you covered. In this section, we’ll discuss the fundamentals of how and why HTML works. 

Basic HTML elements and tags

If you enroll in a course covering the basics of HTML, one of the first concepts you’ll learn will be elements. Elements structure page content by enclosing it in “tags” that provide instructions on how that content should appear.

Every HTML tag begins with an open angle bracket (<) and closes with a closed angle bracket (>). A forward slash before the name of the element closes a particular tag, and HTML tags can nest inside one another. It is essential to close every HTML tag you open. To give you a quick HTML tutorial for beginners, here is one of the most basic HTML tags: “p”, which stands for “new paragraph.”

As you can see, the opening “p” tag begins the paragraph, and the closing tag ends it. This entire HTML snippet is referred to as an HTML element. Other very basic and common HTML tags include “strong”, for bolded content, and “i” or “em”, for italicization.

Structure of an HTML element

A basic HTML element has three parts:

1. Opening tag: This is the element’s name, wrapped in angle brackets, as above, with the paragraph tag.
2. Closing tag: This is the same as the opening tag, but it has a forward slash before the element’s name. Forgetting a closing tag is a common mistake and can lead to conflicts or unexpected results.
3. Content: This is the content that the tags are meant to display and can include text, images or other featured material.

Opening and closing tags

Opening and closing tags are crucial to HTML elements. They tell a web browser when a certain piece of content begins and ends, thereby separating it from other page sections. Forgetting a closing tag can make your HTML content appear unusual or wrong. When developers troubleshoot HTML problems, searching for missing closing tags is usually one of their first steps. 

HTML tags can be nested inside one another. For example, you could use the “strong” tag to nest a bolded word or phrase inside a “p” paragraph element. As with any nesting item, make sure to close the inner tags before closing the outer tags; the browser will not know how to properly process your content if you fail to distinguish your elements.

Content

Content refers to any text, code, table, media or other information presented on a webpage. However, not all HTML elements need to have a closing tag or specified content. These are called empty elements. Don’t let the name mislead you into thinking these elements don’t add anything to the page — they do! 

In fact, one of the most common empty elements is an image element, which points to the location of an image. There is no inner content; instead, HTML image elements refer to an image in a specified location on the web and embed it within the page’s structure.

Attributes

Elements can have attributes specified within the opening tag that help to define them further. One of the most common attributes in HTML are classes, which CSS often uses to define the appearance of certain parts of a webpage. Here’s a quick example of what this might look like:

In this example, “new-para” is the class name associated with this paragraph. For this to have meaning, you would need to define and use the new-para value elsewhere. You could use the same class value for other HTML elements that you want to look the same. When you add an attribute value, wrap it in opening and closing quotation marks for best results.

Other types of attributes are widely used in image and other media elements. Here’s a quick HTML tutorial for beginners:

Here, “src,” for “source,” tells the browser where to find the image. Alt tags describe the picture; these are considered an essential part of HTML content because they make image content accessible to search engines and people who use screen readers.

Block elements and inline

In HTML, block-level elements always begin on a new line and take up the full width of a page. Each block-level element has a top and bottom margin around it. Some of the elements we’ve already discussed, including <p>, are block elements. 

There are countless others; for example, lists, which use the <ol> and <ul> tags, are block-level elements. Similarly, an HTML table is a block-level element that can be used to structure tabular data (i.e., information organized in rows and columns).

On the other hand, inline elements take up only as much width as they need and are often used inside other elements. For example, <br> is used to create a line break without making a new paragraph. Styling elements like <strong> or <em> also are inline elements, among many others. <img> elements are designed to be inline elements so that an image may fit alongside other HTML content and not require a new line of its own.

Headlines, paragraphs and lists

While some people write HTML directly into a plain text editor like Notepad, you can use specialized HTML editors to facilitate the coding process. HTML editing software can help you produce code with fewer errors by debugging as you write. Using an HTML editor can also alleviate common concerns such as forgotten closing tags or missing “alt” attributes for image elements.

In HTML5, you can choose to use CSS for the majority of your styling. However, basic HTML elements can help you to distinguish one part of your writing from another. Headlines or header text are some of the most commonly used types of HTML elements. By using headers, numbered in size from 1 (the largest) to 6 (the smallest), you can define sections of your text with these simple <h1> </h1> or <h3> </h3> tags.

HTML lists can also help to order your content by creating bulleted or numbered lists that make your written content clearer and more concise. There are a few types of lists — for example, while the <ul> tag creates an unordered or bulleted list, the <ol> tag creates an ordered or numbered list. Each list item is enclosed in <li> tags.

You may also make use of HTML color codes to define the colors of your text. You can use CSS for more color complexity, but you can access the full scale of hexadecimal color codes in any HTML document or webpage.

HTML forms

In simple terms, HTML forms tell a web browser what kind of information to take from a user and how to process it.

Each HTML form is enclosed within a <form> tag, but the capabilities they provide are remarkably diverse. Even the most dynamically-constructed websites use HTML forms to receive information from visitors, process payments, manage memberships and allow people to log in to their accounts.