HTML: How to write, learn & use it

If you want to create a website, or if you work on websites in any way, knowing the basics of HTML is essential, since 96.6% of websites use it. 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.

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.

Here’s another definition I like to give: HTML provides structure to the internet and organizes files and content online in a way that humans and machines can understand, interpret, and interact with.

Now, let me break down the acronym for you:

• HyperText refers to links that connect other web pages, files, and content. You probably know these as hyperlinks, such as this one. 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.

• Markup refers to how HTML “marks up” the contents of 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, essentially saying something like, “This is a heading,” or “This is a paragraph.”
• Language means that HTML has a syntax. HTML is a coding language, and it’s a way of writing that computers understand. Like any language, HTML has an alphabet and is used to communicate information. When I first started learning HTML, I was surprised by how readable it was. Once you master the tags, it feels like you're giving instructions in simple English.

How to Write HTML: The Basics

Compared to other coding languages, HTML is easy to read and understand since it's essentially plain English text with extra symbols. HTML elements are the main building blocks of an HTML file.

You need to understand the elements to get a deep grip on HTML.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

Download for free Learn more Download for free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

The Basics of HTML Elements

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.

A standard HTML element consists of three parts:

• Start tag
• Content
• End tag

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 — I’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 tag 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.

HTML Document Structures

Before using HTML elements, you first need to understand how they fit into a complete HTML document. Each HTML file begins with a standard structure that instructs the browser how to interpret the content.

Please look at the HTML and explanation below.

• <!DOCTYPE html>: Declares the document type (HTML5).
• <html>: The root element that wraps all content.
• <head>: Contains meta information (not visible on the page).
• <body>: Holds everything users see and interact with on the page.

These structures are the foundation of every web page you have ever seen.

Using HTML Attributes

An opening tag may also contain one or more attributes. An attribute is extra information that defines how the element looks and/or behaves. Some elements require certain attributes, and almost any element can take optional attributes.

An attribute is always found in the opening tag of an HTML element. Most have the syntax name=“value” though some attributes only require the name without any assigned value.

Let’s look at another element, the a (anchor) element. This element creates a hyperlink. It requires one attribute called href that specifies the destination URL.

(Note that in the example below, the code module won’t open the new page if you click the link due to the module’s limitations. On an actual web page, clicking the link would bring you to hubspot.com.)

The a element can also take other optional attributes. For example, adding the attribute target=“_blank” makes the link open in a new tab or window.

Codepen: https://codepen.io/hubspot/pen/ZENaoYW

Attributes can be written in any order inside the opening tag. However, you shouldn’t put multiple instances of the same attribute inside the same HTML tag. If this happens, generally, only the last instance of the attribute is considered.

Let's look into some common HTML attributes you should know.

Nesting HTML Elements

HTML elements can be nested, which means you can place a component inside another. It's sort of like stacking one box into another. Nesting helps you organize your content, create layouts, and use different styles on your page.

<p>This is a <strong>nested</strong> word in a sentence.</p>

In the HTML above:

• The <p> element is the outer container.
• The <strong> tag is nested inside it to bold the word “nested.”

Now, let me give you a real-life use case of nested elements in HTML. Bulleted lists are a great example of why we need to be able to place a component inside another.

Example HTML:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Mango</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

If you look closely, a nested <ul> list lives inside a <li> of the outer list. For dropdown menus or FAQ sections, you need to use this nested HTML structure.

Pro tip: Always close the inner elements before closing the outer ones. Follow the “last in, first out” procedure.

So, now that we know the basics of writing HTML, how do we use it? That's next.

Beginner's Guide to HTML & CSS

Learn the basic definitions, differences, and codes to know for your website.

• Intro to coding langauges.
• HTML vs. CSS
• Codes to Know
• And More!

Get Your Free Guide Learn more Get Your Free Guide

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

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.

I’ll explain more in detail below, with examples.

HTML adds structure to your webpage.

HTML is the skeleton of a web page. HTML elements allow you to define the structure of a web page using its various components, each helping structure a certain part, such as paragraphs, content, lists, and headers.

For instance, headings (<h1> to <h6>), paragraphs (<p>), and lists (<ul>, <ol>, <li>) help organize content hierarchically, making it easier for users to read and navigate.

Example HTML:

<h1>Top Programming Languages in 2025</h1>
<p>Here's a list of popular languages to learn:</p>
<ul>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Go</li>
</ul>

HTML embeds images and videos.

HTML allows web pages to include images, audio, and video using elements like <img>, <audio>, and <video>. Providing visual and auditory content on the page improves the user experience.

HTML also allows you to adjust the width, height, and position of your images and videos to fit your website's design and alignment.

Example HTML:

<h2>HTML Tutorial for Beginners</h2>
<iframe width="400" height="225"
  src="https://www.youtube.com/embed/qz0aGYrrlhU?start=1110"
  title="HTML Tutorial Video"
  allowfullscreen>
</iframe>
<h3>HTML Code Example</h3>
<img src="https://cdn2.hubspot.net/hubfs/53/image1-2.png" alt="HTML Code" width="300">

HTML creates hyperlinks to connect websites and pages.

HTML uses the <a> (anchor) tag to create hyperlinks, which allow users to navigate between different web pages or resources. These hyperlinks are the backbone of the web as they connect one website to another.

<p>Read more on <a href="https://blog.hubspot.com/marketing/jump-link-same-page#what-is-an-html-hyperlink">What is an HTML hyperlink?</a>.</p>

HTML integrates CSS and JavaScript.

HTML is the host and entry point for CSS and JavaScript. Without HTML, we wouldn't be able to style elements, script structures, or interact with websites. HTML links them together, making modern interfaces possible.

Example HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Page</title>
  <style>
    body { background-color: #222; color: #fff; text-align: center; }
    #box { width: 100px; height: 100px; background: red; margin: 20px auto; }
  </style>
</head>
<body>
  <h1>Click the Box</h1>
  <div id="box"></div>
  <script>
    document.getElementById('box').onclick = function () {
      this.style.background = this.style.background === 'red' ? 'blue': 'red';
    };
  </script>
</body>
</html>

HTML uses semantic markup.

HTML5 introduced semantic elements like <article>, <section>, <nav>, and <footer>. These provide meaningful context to your content. Semantic markups improve code readability and accessibility and help search engines understand the layout.

Example HTML:

<article>
  <header>
    <h2>Beginner's Guide to Web Development</h2>
    <p>By Zadhid Powell | April 7, 2025</p>
  </header>
  <section>
    <p>This guide covers the basics of HTML, CSS, and JavaScript.</p>
  </section>
  <footer>
    <p>© 2025 HubSpot.</p>
  </footer>
</article>

Pro tip: In my experience, using semantic tags early on helped me make my sites more handy and better optimized for search engines, even before I fully understood SEO.

HTML creates other web elements.

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.

Next, let’s cover how to make an HTML file.

How to Make an HTML File

We now know what HTML looks like, but how do we put it into action? Well, since a web page is just an HTML file that is read by a browser, let's make an HTML file!

Choose your HTML editor.

To create an HTML file, you'll need an HTML editor. An HTML or text editor is a software program for writing code. Since an HTML file is in standard text format, any basic text editor will work for this tutorial.

I recommend a text editor with syntax highlighting, which displays the code in different colors, making it easier to read. Notepad++ is a good free text editor for Windows, and Sublime Text is a popular option. (I love using Sublime, and it‘s my preferred text editor. I’m so used to Sublime that I now even write articles on it!)

If you want to write and build your HTML live without swapping windows or saving a lot, use W3Schools' HTML Tryit Editor. You can write your HTML and run it right away to test the build. I find it quite useful for rapid HTML coding.

Write your first HTML code.

Ready to start?

• Pick whichever text editor convinces you and install it.
• When you open the text editor, you'll likely see an editor window that looks something like this:

• With this editor window open, copy the HTML template below and paste it into the text editor window.

Let's break down what each section of this code means:

• <!DOCTYPE html>: This tag tells the browser that it‘s an HTML file. It’s a must in the first line.
• <html lang=“en”>: The <html> element follows the doctype declaration. It's the root element, and it contains all the other elements and the final closing tag as well.

Inside <html>, there are two main parts of the document: the head section and the body section.

• <head>: Contains meta-information like the page title and character encoding. But the browser doesn't display the information.
• <body>: Holds all the content users will see on the page — like text, images, and links.

You'll also notice that the <head> and <body> tags are indented here. This visually indicates to us that these tags are placed inside, or “nested” in, the <html> tags.

While indenting isn‘t necessary and doesn’t affect how the browser renders the document, it's still common practice to indent your HTML for better readability.

Anyways, continuing on:

• In the head section, we've named our page with the <title> element. The title appears, among other places, in the browser tab and search engine results.
• In the body section, we have two elements: a paragraph element and an H1 (heading 1) element. H1s are used as the primary heading of the page, usually to mark the main title of the page.

Beginner's Guide to HTML & CSS

Learn the basic definitions, differences, and codes to know for your website.

• Intro to coding langauges.
• HTML vs. CSS
• Codes to Know
• And More!

Get Your Free Guide Learn more Get Your Free Guide

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

Save and open your HTML file.

With this HTML code pasted into the window, save the file as "index.html“ on your desktop. ”index.html" is the conventional file name for a website's homepage HTML file.

I personally recommend saving your first file as ‘index.html’ and placing it in a dedicated project folder. It’ll help you stay organized when you start adding CSS or JavaScript later.

After saving the file, you'll be able to open it in your web browser. You can double-click the file, right-click and choose Open, or drag and drop the file icon into an open browser window.

And there it is — your first HTML page!

Sure, it‘s pretty basic looking, but that’s intentional. HTML is purely for the content of a page. It creates a simple base upon which you can add styling with another language called CSS.

Once you're comfortable with basic HTML, check out our full CSS tutorial to learn how to make your page come to life. With CSS, you can customize your styling and layouts, changing the color, font, and alignment of elements.

Now, if you want to go on to make a full landing page, you can follow these creating landing page in HTML and CSS guidelines. If you prefer visual instructions, I recommend starting with this basic HTML tutorial from Code with Mosh, an excellent resource for learning to code that has helped me a lot.

How to Code HTML Using AI

AI tools have come a long way. Now, you can learn HTML or generate the HTML you need using AI tools, even without knowing HTML. All you need to do is tell the AI tool to write you the code you want or use the right prompts to generate your HTML.

Generating HTML using AI tools:

• Saves you a huge amount of time.
• Helps you write HTML faster with quick suggestions.

• Makes it easy for beginners to build web pages.
• Helps you avoid common coding mistakes.
• Shows you the right way to write HTML code.

Here are some AI tools I love for writing HTML code:

• Claude. Claude is a conversational AI assistant that focuses on coding-related issues. Claude can assist you in creating structured and semantic HTML layouts. You can start free and upgrade to premium for more usage access.
• OpenAI ChatGPT. This is probably the AI tool you use daily. It'll give you usable HTML code in seconds. You can ask it to customize content, colors, images, and even integrate forms or embed videos. You can also use this one free and upgrade to the Plus version for more usage access and detailed analysis.
• GitHub Copilot. Copilot is an AI pair programmer that works within your code editor (such as Visual Studio Code). It suggests HTML code as you type based on the context. Ideal for building a website from scratch.
• Cursor. This AI-integrated code editor allows users to write and edit code using natural language instructions, enhancing productivity and reducing manual coding errors.

Some no-code and low-code tools also use AI to build and write HTML/CSS for you. Here are some great AI website builders to try out:

• Wix. Creates entire layouts based on a few questions.
• Durable.co. Uses AI to generate business websites instantly.
• TeleportHQ. Converts Figma designs to HTML/CSS automatically.

Pro tip: Regardless of which tool I use, I always double-check the AI-generated code. I’ve found it great for drafts but not always perfect, so I double-check and tweak the results to fit my design.

Before exploring AI coding, I suggest you learn the basics of HTML first, then use AI coding tools to generate your code. It will help you understand the structure and use the output accurately.

Common HTML Elements

The most recent version of HTML, HTML5, includes 110 HTML elements. Don’t worry, though — there are only a handful that you’ll use the most often. Next, I’ll review the most common elements and their tags.

Text and Heading HTML Elements

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. A paragraph is the most common text element in HTML. You’ll probably see at least one on just about any page you visit.

Headings (<h1>, <h2> … <h6>)

Headings are another common element for displaying text. HTML contains six heading elements that represent different levels of section headings. <h1> is the highest section level and the most prominent, whereas <h6> is the lowest and therefore least prominent.

Emphasis (<em>)

The HTML emphasis element signals that the text inside it should be emphasized to readers. Browsers typically render text inside <em> tags in italics.

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

Strong (<strong>)

The HTML strong element indicates that the text it contains is of particular importance or urgency. Browsers typically render the text in bold.

Lists and Table HTML Elements

Unordered List (<ul>)

The HTML unordered list element creates lists of items. Specifically, it’s for listing items when the order of the items in the list doesn’t matter. Shopping lists, for example, don’t need to follow a particular order.

List items are defined by the <li> (list item) tag and wrapped in the <ul> element. By default, the browser will use a bullet point for each <li> element.

Beginner's Guide to HTML & CSS

Learn the basic definitions, differences, and codes to know for your website.

• Intro to coding langauges.
• HTML vs. CSS
• Codes to Know
• And More!

Get Your Free Guide Learn more Get Your Free Guide

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

Here’s an example of an unordered list. Try adding some list items yourself and see how the list changes.

Ordered List (<ol>)

The HTML ordered list element is for listing 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.

Each <li> element will have numbers placed with it. An ordered list starts at the number 1 by default. If you’d like to start at another number, 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. Try adding steps at different parts of the list:

Table (<table>)

The HTML <table> element creates a table for organizing content. It requires three other HTML elements:

• <tr> defines a table row.
• <th> defines the table header
• <td> defines the table data (i.e., the content of the table’s cells).

Here's an example of a table:

Media and Container HTML Elements

Image (<img>)

The HTML image element embeds an image into the document. It requires a src (source) attribute, which specifies the file path of the image.

It also takes the alt attribute, which specifies the image alt text. The browser will still render the image if the alt attribute is not present in the <img> tag. However, readers with visual impairments might have trouble understanding what the image conveys without an alternative text description. So, it’s recommended that all non-decorative images have alt text and therefore use the alt attribute.

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

Pro tip: One habit I developed early is always adding alt text. It’s easy to overlook, but I’ve learned that it makes your site more accessible for screen readers and web crawlers.

Iframe (Video)

The HTML <iframe> element embeds another HTML page or external content (like a video) into your web page. It's commonly used for embedding YouTube videos, maps, or other widgets.

Here's an example of a YouTube video embedded using an iframe:

The src attribute defines the URL of the content to embed, and allowfullscreen lets users open it in full screen. You can adjust the width and height to fit your layout.

Div (<div>)

The HTML div (division) element is a generic content container. Divs help organize the code into sections, which can then be targeted by CSS. They also add line breaks before and after their content. Otherwise, they do not affect the content or layout of the page unless styled with CSS.

Here’s an example of a div wrapped around a paragraph:

Here, the paragraph looks the same as it did without the div wrapper. That’s because no style information was given to this div element. To change the appearance of the container and therefore the paragraph inside that container, you need to add style information.

Say, for example, you wanted to center the paragraph. You could use the following code to horizontally center the text on the page:

Divs are also useful for visually distinguishing different sections of the page. In the example below, the text is wrapped in a div, which is styled to look like a card:

Span (<span>)

The HTML span element is a generic inline container. Like the div element, the span element does not inherently represent anything, but can be used to apply styling to a section of text.

For example, here’s a <span> tag being used to create a drop cap.

Links and Navigation HTML Elements

Anchor (<a>)

The HTML anchor element creates a hyperlink. It requires an href attribute, which specifies the link’s destination. You can also include additional attributes to control how the link behaves.

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

The target=“_blank” attribute opens the link in a new tab, and rel=“noopener noreferrer” improves security and performance when linking externally.

Button (<button>)

The button element creates, you guessed it, a button. Browsers will apply some default styling buttons, so when you click, it looks like it’s being clicked. Attach some JavaScript code to the button to make it do something on the page, like in this example:

Select Dropdown (<select>)

The select element creates a dropdown list from which a user can select one option (or multiple if allowed). It’s best for letting users select one option out of many while maximizing space on the web page.

Page Layout and Breaks HTML Elements

Line Break (<br>)

The line break element creates a line break. You can add a <br> tag wherever you want the text to end on the current line and resume on the next. This element can be used to display poems, song lyrics, or other forms of content where line breaks are important.

Below is an example of an address rendered in two ways: one using line break elements and one using paragraph elements.

You’ll notice that the example using line breaks looks different than the paragraphs example, which has larger spacing between the content. This is because the paragraph element is a block-level element and creates a new block of content.

Horizontal Rule (<hr>)

The horizontal rule element defines a horizontal line across a web page. It can be used to mark any thematic change, like the next scene in a play, a new section of an essay, or the conclusion of an article.

Common HTML Attributes

Attributes modify HTML elements in different ways. An attribute can change the appearance of an element, change an element’s behavior, apply identifiers so the element can be targeted by CSS, or provide accessibility information. Attributes usually appear as name/value pairs, with values in quotes.

Let’s look at the most common attributes you’ll see in HTML.

Styling and Identification Attributes

Style Attribute

The style attribute can be used to quickly apply CSS to an element. It will only be applied to the HTML element that has the style attribute in its opening tag.

Here’s an example of the style attribute in HTML:

Class Attribute

The class attribute is used to group multiple elements under the same name and apply styling to every element in that group.

Beginner's Guide to HTML & CSS

Learn the basic definitions, differences, and codes to know for your website.

• Intro to coding langauges.
• HTML vs. CSS
• Codes to Know
• And More!

Get Your Free Guide Learn more Get Your Free Guide

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

In the example below, the first two paragraphs are given the class styled-text. Then, in the CSS, the style-text class is targeted with CSS (the class is denoted by a period).

ID Attribute

The id attribute is used to identify a single element in an HTML file. Using an ID, you can target a single element CSS. The value of an ID attribute should not be repeated inside an HTML file.

Here’s an example of the id attribute in HTML.

Accessibility Attributes

Alt Attribute

The alt attribute provides alt text, which is descriptive information about an image element. Including alt is important for readers with visual impairments, or in case the image doesn’t load. In these cases, readers will still be able to understand 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:

Title Attribute

The title attribute gives additional information about an element that you may want the reader to know. When the user hovers over an element with this attribute, the value of title will usually appear as a tooltip.

Try hovering over the “(what’s this?)” text in the example below to see an example of a tooltip.

Language Attribute

The language (lang) attribute indicates the language of the element, which helps screen readers and search engines correctly interpret the content of the page.

This attribute is often used in the <html> tag to indicate the primary language of the web page, but it can be placed in other text-based elements like paragraphs and headings. Here are a few examples of lang in HTML:

Linking and Media Attributes

Href Attribute

The href attribute contains the destination of a hyperlink. In simpler terms, it’s where the user goes when they click a link. This attribute is required in an anchor element.

Here’s an example of the href attribute in HTML:

Source Attribute

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

Behavior and Targeting Attributes

Target Attribute

Specifies how the linked document will be opened. Commonly used in anchor tags to open links in a new tab or window. The most common value is _blank, which opens the link in a new tab.

Rel Attribute

Defines the relationship between the current page and the linked resource. It's often used with target=“_blank” to improve security and SEO. You can use multiple values like noopener, noreferrer, or nofollow based on your intent.

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

Learning HTML has never been easier. Whether you prefer reading, watching videos, or getting hands-on with code, there's a resource out there that fits your learning style.

Below, I will share some of the platforms that actually helped me learn HTML.

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

If you‘re starting to learn to code, this free ebook is designed to teach HTML to beginners. It explains what HTML and CSS are, how they work together, and how to get started with these languages if you’re brand new to web development.

As the title suggests, this guide is great for marketers who need to be able to make quick fixes to their websites, blogs, and landing pages without getting too bogged down in details.

2. W3 Schools

W3Schools is a freemium educational website with tutorials covering various aspects of HTML. So far, I have found this website to be the easiest and most comprehensive HTML learning method. W3 School breaks down HTML so effectively that you can understand it immediately.

W3Schools also features an online editor called “TryIt Editor,” which I mentioned before. It allows you to edit and run code examples interactively. W3Schools also offers free HTML templates and references.

3. LinkedIn Learning

If you're a visual learner, check out the online tutorials available at LinkedIn Learning. LinkedIn Learning offers dozens of courses and thousands of video tutorials that cover virtually every HTML topic.

Lessons on LinkedIn Learning 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.

The video below is an excerpt from one course called “HTML Essential Training” by Jen Simmons.

4. Codecademy

If you‘re overwhelmed by the sheer quantity of videos available on LinkedIn Learning, try Codecademy’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.

5. Learn HTML

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 to the next lesson.

Is HTML a programming language?

You may have heard of programming languages like JavaScript, Python, or Java. However, you might have noticed that I don't refer to HTML as a programming language but instead as a “coding language.”

This is because most do not consider HTML to be a programming language.

All programming languages have some function, whether it be evaluating expressions, declaring variables, or modifying data. JavaScript is the most widely used programming language on the web and is used in conjunction with HTML and CSS to make web pages dynamic and interactive.

Though it‘s a very useful language, HTML doesn’t really “do” anything in a functional sense. It simply gives browsers the content it needs to display. In other words, HTML has a structural purpose, not a functional one.

Personally, I think the argument has merit if you look at how HTML is used declaratively to define structure, not behavior. Some developers argue that HTML isn‘t a programming language. It’s just a declarative programming language.

According to Professor David Brailsford from the University of Nottingham, declarative languages are more restricted than other languages, but that doesn't make HTML any less of a programming language.

But the fact is, whether it‘s a programming language or a markup language, you need to learn to use it properly. And that’s the most important thing!

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.

HTML is the predominant language on the World Wide Web. That makes HTML important not only to aspiring programmers but to marketers like yourself.

In my experience, knowing the basics of this markup language has allowed me to customize my website without relying on a developer, which has saved me time and money.

Editor's note: This post was originally published in August 2020 and has been updated for comprehensiveness.

Beginner's Guide to HTML & CSS

Learn the basic definitions, differences, and codes to know for your website.

• Intro to coding langauges.
• HTML vs. CSS
• Codes to Know
• And More!

Get Your Free Guide Learn more Get Your Free Guide

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now