19 min remaining

How do we talk to computers?

Before the advent of speech recognition technology, we couldn’t rely on human speech to communicate with them. Instead, we created new languages that they could understand.

Arguably the most important of those languages is HTML. HTML is the foundation of most web pages. It’s how we tell browsers to structure content into titles, headers, paragraphs, images, links, lists, forms, tables, and more.  

Free Intro Guide to HTML & CSS [Download Now]

In this post, we’ll learn what HTML is and what it’s used for. Then, we’ll walk through how to write your own HTML file and review some of the most common elements and attributes in the language. We’ll end with a brief look at some resources you can use to continue learning and writing HTML. Let’s get started.

First published by Tim Berners-Lee in 1989, HTML is short for “Hypertext Markup Language.” Let’s break this down word by word to better understand what HTML is.

“Hypertext” is text that contains references to other text, also known as hyperlinks. Hyperlinks allow you to go anywhere on the web with a click of the mouse. Rather than reading a web page in the linear order that the author laid out, like in print, you can use hyperlinks to jump to another section on the same page or website, or to a completely new site. Hyperlinks can even open a PDF, email, or multimedia, like a video or audio file. Here’s an example of a hyperlink that sends readers back to the top of this blog post.

Linking information in this way revolutionized the web. Together, HTML and the internet made it possible for anyone to access all types of information around the world, in any order they wished.

“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. They just tell browsers how to display the document to visitors.

“Language” is the simplest part of the acronym to understand. Like any language, HTML is made up of a unique syntax and alphabet. But what kind of language is it exactly? Let’s tackle this question below.

Is HTML a programming language?

Whether HTML is or is not technically a programming language is an ongoing debate in the web development community. The majority defines HTML as a markup language, not a programming language, although some argue the two aren’t mutually exclusive.

To understand this distinction, we have to know the definition of a programming language. All programming languages have some functional purpose — they need to “do” something, whether it be evaluating expressions, declaring variables, or modifying data. These languages not only instruct computers what to do, but how to do it. JavaScript is the most widely-used programming language in web development.

HTML, on the other hand, doesn’t really “do” anything; it simply gives browsers the content it needs to display. HTML doesn’t care how the browser goes about displaying the content, as long as it’s displayed. In other words, HTML has structural purposes, not functional ones.

Still, some developers use this same logic to argue HTML really is a programming language — it’s just a declarative programming language. According to Professor Brailsford from the University of Nottingham, for example, declarative languages are much more restricted than other languages because they ask for something and don’t care how it happens, but that doesn’t make them any less of a programming language.

While this is an interesting and rich point of discussion, it won’t affect how you code in or use HTML. With that in mind, let’s move on to what HTML is used for.

What is HTML used for?

HTML is primarily used for creating web pages. Because it’s open-source and supported by all modern browsers, HTML is free to use and ensures that your text, images, and other elements are displayed as you intended. Without HTML, you’d just have plain text files that looked like this:

A plain text file displayed in Notes tab

Image Source

With HTML, not only can you format documents with headers, paragraphs, lists, and other elements — you can also embed images, videos, audio files, and other multimedia via hyperlinks. And you can link to other web pages on the same website or from another site. This allows visitors to easily navigate your website and between websites stored on different servers.

Even, after adding your headers, images, and hyperlinks, you’d still have a very basic web page — and that’s by design. HTML is supposed to create a simple base upon which Cascading Style Sheets (CSS) and JavaScript (JS) can be added. With CSS and JS, you can customize your layouts, changing the color, font, and alignment of elements, and add dynamic functionality like pop-ups and photo sliders.

HTML is used to create more than web pages. You can use it to make tables for organizing data. You can create forms for collecting user information, processing transactions, making reservations, and placing an order, among other purposes. You can also create emails with HTML.

Whether you want to create web pages, tables, forms, or emails, you need to know how to write HTML. Let’s break down the process below.

How to Write HTML

As mentioned above, HTML is just text annotated with tags and attributes. To help you visualize this syntax, here’s a graphic from Online Design Teacher:

Annotated graphic of HTML element labels start tag, end tag, attribute, value, and content

Image Source

To ensure we understand the different parts of an HTML element, we’re going to take a closer look at both tags and attributes below.

Tags

HTML elements are designated by tags. Most elements have an opening and closing tag. Opening tags precede the text and contain the element name enclosed by the brackets “<” and “>”. Closing tags are identical to opening tags, save for the backward slash that precedes the element name.

Say you want to add a paragraph to your web page, and the text of the paragraph is “This is a paragraph.” You’ll wrap it with the following paragraph tags: <p></p>. So, the HTML will look like this:

 

 

   <p>This is a paragraph.</p>

Together, these three parts make up an HTML element. Every HTML element is the same: you’ve got your opening tag, your closing tag, and some text in between.

The element name is case insensitive. Meaning, it can be written in uppercase, lowercase, or some combination of the two. For example, the <p> tag can be written as <P>. However, it is considered a best practice to write the name in lowercase.

Attributes

While all HTML elements need tags, only some need attributes. That’s because an attribute provides additional information about the HTML element, and this information can be essential or non-essential.

For example, an image element must always have a source attribute, which contains the image URL or file path. Otherwise, the browser will not know what image to render. The same goes for the anchor element. It must have an href attribute, which contains the link’s destination. Otherwise if a visitor clicks on the anchor element, the browser won’t know where to send them.

Other attributes aren’t essential to include but are considered a best practice. For example, a browser can render an image without the alt attribute, which contains image alt text. But a reader with visual impairment might have trouble understanding what the image conveys without it.

Now that we understand the importance of attributes, let’s make sure we understand how to find and write them. An attribute is always found in the opening tag of an HTML element and has the  syntax: name=”value”.

So let’s say you want to specify the paragraph above with a class name so that you can target the element with CSS. Then you’d define it with a class attribute set to whatever value you’ll remember and place it inside the opening tag. The result will look something like this:

 

 

   <p class=”navy”>This is a paragraph.</p>

How to Create an HTML File

To build a website with HTML, you need to create an HTML file first. This file will contain all your HTML for your web page, and be uploaded to your web server. That way, when a visitor searches for your website, the server will load the file and render the web page accordingly on the visitor’s browser.

Since an HTML file is in standard text format, you can use basic text editors like Notepad++ to create and edit your file. Once you select an editor, writing the actual code is easy. We’ll walk through the process step-by-step so you can create an HTML file for your web project.

To start, you want to declare the type of document as HTML. To do so, you’d add the special code <!DOCTYPE html> on the very first line.

Then you want to define the root element. Since this element signals what language you’re going to write in, it’s always going to be <html> in an HTML5 doc. Within the opening tag of the html element, you should include a language attribute and define it. This will ensure screen readers can determine what language the document is in, making your website more accessible. Without a language attribute, screen readers will default to the operating system’s language, which could result in mispronunciations of the title and other content on the page. Since we’re writing this post in English, we’ll set the file’s lang attribute to “en.”

An HTML doc is composed of two parts: the head section and the body section. The head contains meta information about the page as well as any internal CSS. The browser does not show this information to readers. The body section contains all the information that will be visible on the front end, like your paragraphs, images, and links. To create these sections, just nest <head></head> and <body></body> tags inside the html element.

In the head section, you want to name the document. You’ll write a name and then wrap it in <title></title> tags. I’m also going to add <style></style>tags. In between these tags, you’d add any internal CSS you’re using to style your HTML. Instead of making up some rule sets, I’m just going to add a comment in CSS.

Note: In some HTML docs, you won’t see style tags or any CSS. That means the site has no stylesheet, or it’s using an external style sheet. In the case of an external stylesheet, you’ll see a link in the head section of the doc. If you’re loading Bootstrap CSS onto your project, it will look something like this: <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">. For the sake of this demo, I’ll include a dummy link and a comment in HTML noting that it’s optional.

In the body section, let’s now add a header and paragraph. You’ll write out the heading name and wrap it in <h1></h1> tags, and write out the paragraph and wrap it in <p></p> tags.

Last but not least: don’t forget the closing tag of the html element!

All together, this is what your HTML file will look like:

 

 

   <!DOCTYPE html>

<html lang=”en”>

<head>

<title>This is the Title of the Page</title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- This link is only necessary if you’re using an external stylesheet -->

<style>

/* These style tags are only necessary if you’re adding internal CSS */

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

 

Below is how it would look on the front end. Note that only the heading and paragraph from the body section are rendered.

Only the heading and paragraph of a basic HTML file display on front end

Image Source

As you can see, this is a skeletal HTML file. To fill it in, we need to take a look at some common HTML elements. We’ve already noted two, the heading 1 and paragraph element. Let’s take a closer look at these and more below.

Common HTML Elements

The first version of HTML consisted of a total of 18 tags. Since then, four versions have been released with dozens of tags added to each version. In the most recent version, HTML5, there are 110 HTML tags.

Below we’ll take a look at the most common elements and their tags.

Paragraph (<p>)

The HTML paragraph element represents a paragraph. By placing <p></p> tags around text, you’ll make that text start on a new line.

Here’s an example of two paragraphs:

 

 

   <p>This is a paragraph.</p>

<p>Here’s another paragraph on a new line.</p>

 

Here’s how that code would render on the front end:

Two sentences on different lines because of paragraph HTML element

Image Source

Image (<img>)

The HTML image element embeds an image into the document. It requires a source attribute to render properly. An alt attribute should also be included in case the image doesn’t load properly or the reader has a visual impairment.

Here’s an example of an image with a source and alt attribute:

 

 

   <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt=”blackhole”>

 

Here’s how that code would render on the front end:

Image of blackhole displayed because of image HTML element

Image Source

Headings (<h1>-<h6>)

The HTML heading elements represent different levels of section headings. <h1> is the highest section level and therefore the largest font size, whereas <h6> is the lowest and therefore smallest font size.

Here’s an example of a second-level heading:

 

 

   <h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

 

Here’s how that code would render on the front end:

Six heading levels displayed using heading HTML elements

Image Source

Division (<div>)

The HTML Content Division element is a generic block-level container for “flow content.” Flow content is a category of HTML elements that contain text or embedded content. The anchor, block quote, and heading elements are considered flow content.

On the back end, div elements help organize the code into clearly marked sections. On the front end, they have no effect on the content or layout of the page unless styled with CSS.

Here’s an example of div wrapped around an image:

 

 

   <div>

  <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">

</div>

 

If you tried to render this code, then the image would look the same as it did without the div wrapper element. That’s because no style information was given to this div element. To change the appearance of the container and therefore the image inside that container, you’d need to add style information.

Say, for example, you wanted to center the image. Then you could use the following code:

 

 

   <h2>How to Center an Image with the Text Align Property</h2>

<p>This is just to show the photo is centered.</p>

<div style="text-align: center;">

  <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">

</div>

 

This would horizontally center the image on the page, as shown below:

Image center aligned because contained in div HTML element

Image Source

Span (<span>)

The HTML span element is a generic inline container for “phrasing content.” Phrasing content refers to text and any markup it contains, like <abbr> and <audio> tags.

Span tags do not inherently represent anything, but they are used to group phrasing content for two reasons. The first is to apply style information to a particular part of text. For example, if you’re creating drop caps, you can wrap the first letter of the opening paragraphs of each section of your article in span tags.

Here’s an example of a span nested in a paragraph:

 

 

   <p><span>T</span>his is dummy text. This is more dummy text.</p>

 

If you tried to render this code, then the paragraph would look the same as it did without the span element. That’s because no style information was included. To change the appearance of the span element, you can add a style attribute.

Say, for example, you wanted to create a drop cap. Then you could use the following code:

<p><span style="font-size:36px;">T</span>his is dummy text. This is more dummy text.</p>

This would turn the first letter into a drop cap, as shown below:

Drop cap created with span HTML element embedded in paragraph element

Image Source

The second reason to use span tags is to group elements that already share attribute values. For example, maybe you have a website for English speakers learning French. The default language is set to English but on several pages, you might have a table with French terms in the first column and their English translations in the second column. In that case, you can wrap the French terms in span tags with the language attribute set to “fr.”

Anchor (<a>)

The HTML anchor element creates a hyperlink. The anchor element requires an href attribute, which species the destination of the link. The destination can be another section on the same web page or another web page on the same site, or external websites, files, and email addresses.

Here’s an example of a link nested in a paragraph:

 

 

   <p><a href="default.asp"">This is a link</a> that appears within a paragraph.</p>

 

Here’s how that code would render on the front end:

Linked text in sentence created with anchor HTML element

Image Source

Unordered List (<ul>)

The HTML unordered list element is used for grouping items when the order doesn't matter. Shopping lists, for example, don’t need to follow a particular order. List items must be defined by the <li> tag and then wrapped in the <ul> element.

Here’s an example of an unordered list:

 

 

   <h1>Ingredients for Street Corn</h1>

<ul>

  <li>Jalapeno</li>

  <li>Bag of frozen corn</li>

  <li>Cotija cheese</li>

  <li>Mayo</li>

  <li>Chili powder</li>

  <li>Cilantro</li>

  <li>Lime</li>

</ul>

 

Here’s how that code would render on the front end:

Unordered HTML element used to list ingredients for street corn

Image Source

Ordered List (<ol>)

The HTML ordered list element is used for grouping items when the order does matter. Recipes, for example, should follow a particular order. The steps must be defined by the <li> tag and then wrapped in the <ol> element.

An ordered list will start at the number 1 by default. If you’d like to start at another number, simply add a start attribute and set the value to the number you want.

Here’s an example of an ordered list that starts at “1”:

 

 

   <h1>How to Make Street Corn</h1>

<ol>

  <li>Chop the jalapeno.</li>

  <li>Add jalapeno and frozen corn to skillet.</li>

  <li>Cook until charred, then let cool for 5 minutes.</li>

  <li>Combine cotija cheese, mayo, chili powder, cilantro, and lime in bowl with corn and jalapeno.</li>

</ol>

 

Here’s how that code would render on the front end:

Ordered list element used to create street corn recipe

Image Source

Emphasis (<em>)

The HTML emphasis element emphasizes the text it contains. Browsers typically render the text in italics.

Here’s an example of the emphasis wrapped around a paragraph and nested within a paragraph:

 

 

   <p>This paragraph is normal.</p>

<p><em>This paragraph is important!</em></p>

<p>This <em>word</em> within the paragraph is important!</p>

 

Here’s how that code would render on the front end:

Italicized sentence and word within sentence created by emphasis HTML element

Image Source

Strong (<strong>)

The HTML Strong Importance Element indicates that the text it contains is of strong importance or urgency. Browsers typically render the text in bold. This is similar to the HTML Bring Attention To element (<b>).

Here’s an example of both the strong and bring attention to elements:

 

 

   <p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

<p>This <b>word</b> within the paragraph is important!</p>

 

Here’s how that code would render on the front end:

Bolded sentence and word within sentence created with strong HTML element

Image Source

Common HTML Attributes

Attributes modify HTML elements in different ways. They can change the appearance of the element, apply unique identifiers so the elements can be targeted by CSS, or provide necessary information to readers or screen readers.

Below we’ll take a look at the most common attributes.

Style Attribute

The style attribute contains inline CSS. This CSS will override any styles set in the head section of the document or in an external stylesheet. It will only be applied to the HTML element that has the style attribute in its opening tag.

Here’s an example of the attribute in HTML:

 

 

   <p style="color: #800000">This paragraph will be maroon. </p>

<p>This paragraph will be black by default. </p>

ID Attribute

The ID attribute is used to identify a single element in an HTML file. That means the value of an ID attribute should not be repeated inside the same file. Using this unique value, you can target a single element with internal or external CSS.

Here’s an example of the attribute in HTML:

 

 

   <h1 id=”decorative”>Title in Fancy Typography</h1>

 

Class Attribute

The class attribute is used to identify a group of elements under the same name and customize that group, effectively creating a new group of elements. Bootstrap buttons, for example, are all labeled with the .btn class so they have the same basic style: 14px font, medium size, rounded edges, etc. They can be further styled with default modifier classes, like .btn-primary below.

Here’s an example of the attribute in HTML:

 

 

   <button class="btn btn-primary" type="submit">Button</button>

 

Language Attribute

As previously mentioned, the language attribute signals to screen readers what the primary language of the web page is and when they need to switch to another language. This is a small detail that can make your content more accessible to all readers, no matter what region they’re from or language they speak.

While this attribute is most commonly embedded in the HTML element, it can also be used with paragraph, div, span, and other elements.

Here’s an example of the attribute in HTML:

 

 

   <p lang="fr"> Cette phrase est en fran&ccedil;ais </p> (French)

<p lang="es"> Esta frase es en espa&ntilde;ol. </p> (Spanish)

 

Href Attribute

An href attribute contains the destination of a link. This attribute must always be included with an anchor element.

Here’s an example of the attribute in HTML:

 

 

   <a href="https://www.hubspot.com">HubSpot</a>

 

Source Attribute

Just like an anchor element needs an href attribute, an image needs a source attribute. This contains the path to the image file or its URL.

Here are two examples of the attribute in HTML:

 

 

   <img src="images/pineapple.png">

<img src="https://cdn.pixabay.com/photo/2015/07/30/11/05/pineapple-867245_960_720.jpg">

 

Alt Attribute

The alt attribute provides descriptive information about the HTML element. This is important for readers with visual impairments and for all readers in case the element doesn’t load. In that case, readers will still be able to glean what the element was meant to convey. Like the source attribute, you’ll most often find the alt attribute with the image element.

Here’s an example of the attribute in HTML:

 

 

   <img src="https://cdn.pixabay.com/photo/2015/07/30/11/05/pineapple-867245_960_720.jpg" alt="Pineapple in grass">

 

Data-* Attribute

The data-* attribute is used to store custom data that is private to the page or application. You can use this stored data in the document’s JavaScript to create a more dynamic experience for the user.

The asterisk in the data-* attribute can be any value.

Here’s an example of the attribute in HTML from W3Schools:

 

 

   <ul>

  <li data-animal-type="bird">Owl</li>

  <li data-animal-type="fish">Salmon</li>

  <li data-animal-type="spider">Tarantula</li>

</ul>

 

I could then use this data in the JavaScript to trigger a pop-up message providing more information about each list item. Say, for example, a visitor clicked on the word “Owl.” Then a pop-up box would appear saying “The owl is a bird.”

Now that we’ve covered the most common elements and attributes in HTML, let’s explore where you can practice writing this language and continue learning more about it.

How to Learn HTML

There are hundreds of resources available to learn HTML. Depending on your learning style, you may prefer to read blog posts, watch video tutorials, take online courses, download an ebook, or use a combination of all of these resources.

Below we’ll walk through at least one example of each of these content types. That way, no matter what type of learner you are, you can find a resource that will help you learn this programming language.

1. The Beginner's Guide to HTML and CSS for Marketers

This free e-book will explain what HTML and CSS are, how they’re different, and how to get started if you're brand new at coding. As the title suggests, this guide is specifically designed for marketers who need to be able to make quick fixes to their websites, blogs, and landing pages.

Table of content for HubSpot's Beginner's Guide to HTML & CSS for Marketers

2. Lynda.com

If you’re a visual learner, check out the online tutorials available at Lynda.com. Lynda.com offers 48 courses and over 1,000 video tutorials that cover virtually every HTML topic, from forms to semantic data to everything in between. These lessons are organized into three levels — beginner, intermediate, and advanced — so you can develop your skills over time. To get access to all content on the site, you can sign up for a monthly or annual subscription.

HTML Courses and video tutorials available at Lynda.com

3. Codecademy

If you’re overwhelmed by the sheer quantity of videos available on Lynda.com, try Codeacdemy’s Learn HTML class. This online course will start with the basic structure and elements of HTML. You can then put your knowledge to the test by building out more complex elements and projects, including HTML tables and forms, from scratch. While you can complete most of the course for free, there are pro features like quizzes and projects that you’ll have to pay to unlock.

Syllabus of Codecademy's Learn HTML class

4. W3Schools HTML Tutorial

Sometimes you have to learn by doing. W3Schools HTML Tutorial is centered on that exact concept. With its online code editor, you can start with the bare bones of an HTML document and practice writing HTML from scratch, or you can start with more fully fleshed out examples and edit them. You can also complete exercises and quizzes for each topic you cover.

An HTML file example shown in W3Schools TryIt Editor

5. Learn HTML

Like W3School, Learn HTML is a free interactive tutorial. However, rather than try to be the most comprehensive resource on HTML, Learn HTML offers a short step-by-step guide for building out a web page. At every step, you can test whether you understood the lesson by completing an exercise in the online code editor. If your code matches the expected output, then you’ll get a success message and be invited to move onto the next lesson.

Homepage of first course on Learn HTML

Now You’re Ready to Code

HTML is the language we use to talk to computers. It is how browsers display text, images, paragraphs, and other elements on a web page.

As such, HTML is the predominant language of the World Wide Web. That makes the language important not only to people trying to become programmers, but to marketers like yourself. Knowing the basics of this markup language will allow you to make changes to your website without needing to rely on a developer, saving you and your business time and money.

New Call-to-action

 css introduction

Originally published Aug 20, 2020 7:00:00 AM, updated August 20 2020

Topics:

HTML