Quick Links

Since the beginning of the internet, HTML has been crucial to making the world wide web work and appear the way we want it to. Let's take a look at what HTML is and how it turns into the pages you see every day.

The Backbone of the Internet

HTML stands for "hypertext markup language." It's a coding language used to create pages that a web browser can display. Most of the web pages you find on the internet, including the one you're reading this article on right now, are stored as an HTML file. Websites are a bunch of related HTML pages stored on a server somewhere. That's why the language is frequently called the "backbone of the internet."

Whenever you go to a page on the internet, you're essentially requesting an HTML file stored on the server. Then, the browser you're using, such as Chrome or Firefox, will parse the HTML and display it to you in the way that it's intended.

HTML's universality and versatility make it the single most popular markup language in the world. Most front-end web developers start by learning how to code in HTML. The drag-and-drop tools and WYSIWYG editors are eventually translated into HTML so that browsers can parse them.

Related: What Is a Markup Language?

How HTML Works

Like any programming language, HTML looks like a bunch of commands and text blocks before it's turned into the front-facing visual. If you're curious to see what the HTML on this particular page looks like and you're on a desktop or laptop, try right-clicking anywhere on this page and select "View Page Source" (the option may vary depending on your browser). It should take you to a giant wall of code.

Most HTML is built using "element blocks," which are snippets of HTML code that separate different elements on a page. For example, this article's body is an element block, as is the menu, the recommendations below, and the page's footer. These elements are coded in their own way, as they may behave differently.

A crucial part of building out HTML pages is the use of Cascading Style Sheets (CSS). These are documents that define what particular elements of a page should look like. For example, how big images should be, what fonts should appear on a page, and how a web page should respond when it's resized or stretched. These are all crucial to creating attractive, cohesive, and stylish websites. If you've noticed websites starting to look better in the last decade, the increasing use of CSS is the biggest reason. You can read more about CSS here.

One of the best things about HTML is its ability to run dynamic scripts via JavaScript or JS. These scripts can create dynamic elements. For example, on certain websites, hovering on an image will allow you to zoom into it. You can make this effect by coding in a JavaScript element.

Related: How to Disable (and Enable) JavaScript in Google Chrome

HTML Basics

While HTML is a fairly complex language with tons of different tags and blocks, there are a few HTML codes that might come in handy as you're browsing the web. Here are a couple of basic HTML tags that you might encounter.

<a href="https://www.howtogeek.com">How-to Geek</a>

How-To Geek

You use the <a> command to create a link. The URL is where the link will point to, and the text that reads "How-to Geek" is how it will appear to an end-user.

<b>bold</b> <i>italic</i> <u>underline</u>

bold italic underline

You can use the <b>, <i>, and <u> to apply the standard text formatting options: bold, italics, and underlined text.

<img src="picture.jpg">

The <img> tag is used to embed an image into a page. It will either pull the image from the same domain, or you can point it to an external domain. You can also customize it with some additional attributes, such as resizing and alt text.

<h1>heading 1</h1> <p>paragraph</p>

The above are heading and paragraph tags. Similar to how Microsoft Word allows you to sort the text into headers and body text, HTML can also format text based on default header and paragraph options. These formats are defined using the CSS stylesheet.

<p style="color:edr;">red paragraph</p>

You can also use the "style" attribute to customize the text with various style settings, such as text color, background color, and font size.

If you're interested in learning more HTML formatting options, check out the W3Schools' free resources. You'll find a complete list of HTML tags that you can use to start building your web pages.