Learn HTML: Learn the Foundations of HTML

Udemy Editor

By Mark Lassoff for Udemy

Looking for more than a guide? Check out Mark’s comprehensive HTML and CSS course!

Note: This post is part of our “Getting Started” series of free text tutorials on some of our most popular course topics.

To jump to a specific section, click the table of contents below:

What Is HTML5?

HTML is a markup language that provides the structure that lies underneath every website—and many mobile apps. You can easily think of HTML as the framing that gives structure to content, but is nearly invisible to the naked eye. HTML stands for HyperText Markup Language. If the term HyperText is unfamiliar—as it is to many—it simply means interactive text. Hypertext is generally made interactive with hyperlinks, which we’ll discuss later on in the tutorial.

For many, learning HTML is a first step towards learning web design and development—or even more advanced programming languages. Most think HTML is clear and easy to learn. Perhaps many think HTML is easy to learn due to the fact that it’s a markup language, which is distinct from a programming language. A markup language is designed to describe the purpose of content pieces in a document.

A common misconception about HTML is that it is used to design a web page or web site. This simply isn’t true. While the HTML language provides structure, that structure is divorced from the actual appearance. The HTML structure can be applied to large-screen monitors, mobile devices and even the printed version of documents.

Figure 1: Some of the HTML that structures Udemy.com as viewed in the web browser. You can view the HTML from any site in your web browser by clicking View —> Source in the browser menu.

The actual graphic design of a web site is defined using a separate language called CSS, which stands for Cascading Style Sheet language. In this tutorial we’re going to use mostly HTML5 markup, but will also introduce some CSS so we can make our HTML5 content look better. Even if you don’t have any CSS defined in your document, the browser has default CSS for each HTML5 element. This is known as the default style sheet. The default style sheet styles each HTML element if no CSS is provided. The default styles tend to be very boring, but they do make plain HTML content appear readable in the browser.

Versions of HTML

There are a number of versions of HTML that are in use today. The most current version of HTML is HTML5. It was recently made the current recommendation of the World Wide Web Consortium (W3C), the standards body that governs HTML. (Without standardization and the W3C, every browser might interpret HTML differently, causing a different result in Chrome, Firefox and Safari.)

HTML5 has brought some much-needed standardization to the world of HTML. With HTML5 we can now play audio and video directly in the web browser. This latest version of HTML has brought us many new tags which have allowed us to better describe (or mark up) the content in our documents. For example, before HTML5 we only had (primarily) (paragraph) tags and <h> (heading) tags to describe our content. HTML5 has brought a plethora of new tags to allow us to structure documents. These new tags include header, footer, article, section, aside and nav (for navigation elements).

Prior to HTML5, most developers were using HTML 4.03 or XHTML. HTML 4.03 was an important update over older previous versions of HTML. There are still a great many web sites running on the HTML 4.03 standard today. HTML 4.03 required a bit more verbiage in some places, and was more limited than the current HTML5 version. XHTML was a stricter version of the HTML standard that required code to be compliant with both the HTML and XML development standards.

The good news is there is no real reason to get too hung up on the different versions of HTML. They are all very similar, and the differences are really nuanced. If you are familiar with HTML5 and need to work with older HTML 4.03 code, you should be able to do so without issue.

Figure 2: HTML5 has included many new tags to allow us to describe content well, including: header, footer, article, section and aside.

The Lingo: Tags, Elements, Content, Attributes and Values

HTML5 code can appear confusing at first. It’s important to understand the vocabulary behind HTML5 code, as it makes the code easier to understand and allows you to better communicate about HTML code with others. If you understand and can identify tags, content, attributes and values in HTML5 code, you’ll be well on your way to a better understanding of the code.

Tags and Elements

Tags are the essential building blocks of HTML. Tags are the individual content units that make up the HTML markup language. If you are following best practices, HTML tags are paired into an opening tag and a closing tag. Together an opening tag, closing tag and whatever appears in between are known as an element. Consider the HTML element below:

Until the end of time

In this element there are two tags: the opening and closing “p” tags, which is an abbreviation for paragraph tag. Collectively, the opening tag, the text “Until the end of time” and the closing tag are known as an element.

Opening tags are always placed in brackets like this:

Closing tags are always placed in brackets with a forward slash like this:

Elements can be considered the building blocks of HTML code, and tags are the building blocks of elements.

Content

In our element example above, the content of the element is the text “Until the end of time.” The content is most often what is actually being delivered for the user to read, listen to or view. All of the text you view in a browser is content that exists in some element of the HTML code. Element content can be broken down into three categories:

Text Content: Text content inside an element is often directly displayed to the user. Text can be a single sentence, an entire paragraph, or even an entire article. The following HTML element contains only text content:

If you are strong enough, there are no precedents

Element Content: Some elements contain one or more additional elements of content. Later in this tutorial, we’ll examine basic document structure, which uses a number of elements contained in other elements. For example, the <head> element below contains element content:


<head>
	<title>You rock the world</title>
	<meta type="author" description="Mark Lassoff" />
</head>

Empty Content: A few elements can be empty and contain no content at all. These elements are usually abbreviated and not closed with a formal closing tag. The break element, , is used with frequency and is empty. The “/” in the tag indicates that the tag is both an opening and closing tag.

Attributes and Values

Often tags need to be modified in some way or additional information is needed about how the tag should perform. Frequently, tags need to be linked to CSS or Javascript code in order to make them dynamic. In either of these cases, attributes and values are used. You might see some HTML code that is similar to this:


<p id="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus felis, finibus sed nunc et, dignissim placerat elit. Curabitur nec leo rhoncus, condimentum urna quis, dapibus sapien. Maecenas condimentum turpis id arcu rhoncus sodales. Vestibulum mattis varius ligula, sed venenatis lorem gravida ut. Donec interdum consectetur congue. Pellentesque tincidunt lobortis pretium. Donec urna urna, cursus eget nunc sit amet, vehicula mattis odio. Nam et venenatis tellus. Etiam at ligula lacinia, mattis nunc eget, condimentum nibh.</p>

If you examine the opening paragraph tag, you’ll notice the addition of an attribute and value. The attribute “id” allows us to assign an identifier to the element. (This is used if we want to address the element through Javascript or CSS code). The value is “first” which is the arbitrary value value I gave this element. There are no specific rules for providing values for id attributes; just be systematic and do what makes sense to you.

In older HTML you may see attributes and values designed to affect the appearance of the content in the browser. For example, you might see code similar to the following:

Tricks of the trade

Be aware that while this is valid code, attributes that change the appearance of the content are no longer recommended for use in HTML5. Appearance is now within the purview of CSS, and this is code that should be updated.

Tools of the Trade

Every profession has “tools of the trade.” In the case of HTML, these are programs that you will use to write and display code. Note that the programs suggested here are merely the author’s recommendations; there are dozens of good tools out there. Most HTML coders discover their favorite tools through a process of trial and error. Try several tools and see which you like best.

The Text Editor

The text editor is the program where you will author your HTML5 code. Text editors are akin to stripped-down word processors. Most importantly, in contrast to word processors, they keep the text “pure” and don’t inject formatting codes that might confuse browsers trying to interpret HTML.

Asking a developer, “What’s the best text editor?” might be akin to starting a heated argument. Many developers are super passionate about their text editors.

A good free text editor is Brackets from Adobe. Brackets is available for PC and Mac, and you can download it for free.

Figure 3: Brackets from Adobe is a free, popular text editor. Examples in this article were created using Brackets.

Your Browser

The browser landscape is always changing. Most developers have several browsers installed on their machine. The goal is often to make sure HTML and CSS code performs the same across that gamut of browsers. Google Chrome remains a favorite of many developers because of its extensive developer tools. Developers’ tools within Chrome provide a means of testing HTML and Javascript code and tracking down problems.

Figure 4: Chrome Developer tools ready for action. These tools can be very helpful in debugging complex web sites.

In addition to Chrome, most web developers have Firefox, Safari and even Opera to test their HTML code. With many Windows users currently upgrading to Windows 10, users should consider testing in the Windows Edge browser, as well.

Your First HTML Document

Now’s the time to fire up your text editor and web browser and write some code. Commonly the first program that developers write when learning a new language is the “Hello World” program. This code displays the text “Hello World” in the browser. To honor the tradition, we’ll do the same here.

Writing the Code

Open your text editor and type the following code:


<!DOCTYPE html>
<html>
    <head>
        <title>First HTML document</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Be careful as you key in the code, as a single error might cause the code to display improperly in the browser. Don’t worry much about the meaning of the elements; we’ll discuss those later. For now, just type in the code and get used to the process of writing code in a text editor and displaying it in a browser (which we’ll discuss next).

You’ll notice as you type the code that some lines are indented. This is done in an effort to make the code itself more readable and does not have any effect on how the code is displayed in the web browser. In fact, the browser completely ignores the indentation. The indentation does, however, make it easier for your human colleagues to read your code.

Using the save feature in your text editor saves the document as helloWorld.html. HTML documents you create should always use the .html extension.

Displaying the Result in a Web Browser

Loading the code into your web browser for testing should be as easy as double-clicking the icon for helloWorld.html. Hopefully you should get a result similar to the screenshot below:

Figure 5: The Hello World displayed in Google’s Chrome browser.

If you aren’t greeted with “Hello World” in your browser window, open your text editor again and check your code carefully against the code provided for you.

HTML Document Structure

HTML documents all share a common structure. The structure provides a skeleton for all HTML documents. The structure looks like this:


<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

You should note that the first line of code is not actually HTML code. The first line is known as a doc-type definition. Its purpose is to define the document as an HTML document. The doc-type definition shown is for HTML5 documents. The doc-type definition has been greatly simplified for HTML5. The doc-type definition for the older XHTML standard was much longer:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The doc-type definition also has no effect on the way a page is displayed; It is simply declarative, though it might be used by a validator to ensure that the code meets the HTML standard you have declared in the DOCTYPE element.

The basic document structure is generally broken into two parts: the head and the body.

The Document <head>

The document head generally contains three specific types of elements. First, the document <title> element defines a general title for the document. The title is used by search engines, like Google, to index the page. The title is also displayed in the document tab of the browser. Finally, the title is used if the user saves the page as a bookmark.

The second type of element is a “meta” tag. Meta tags provide further information about the document itself. For example, the meta tags may contain a description of the web site that is used by search engines.

Figure 6: Some of the information in Google’s listing on Udemy was supplied by meta tags. Note the descriptions under each page header.

Finally, the third type of element contained in the document head are link elements that tie Javascript code and CSS code to the HTML document. Some complex HTML documents have ten or more link elements that include external scripts and libraries.

The Document <body>

Just about everything the user sees in the document window of the browser is contained in the <body> element of the HTML code. The body is, essentially, a container for the visible content on a page. The body is usually the longer section of the document and can contain an unlimited number of HTML elements.

The document body is where you will spend most of your time as a web developer. Most of the code that we’ll be working on in the rest of this tutorial will appear in the body element of the HTML script.

Displaying Text

The most basic task accomplished with HTML code is displaying text in the browser window. Our initial “Hello World” script displayed text in the browser window. As HTML coders, we actually have quite a bit of control over the text and how it appears in the browser. Let’s take a look at some of the HTML elements that are used to display text.

Headings

Most documents (including this one) have some kind of structure that includes various levels of headings and subheadings. HTML5 documents represent headings in six different levels of importance. The most important headings are marked with the <h1> tag. The secondary headings are marked with <h2>. The least important headings are marked with <h6> (though few documents have a structure that includes six levels of headings).

Consider the following code:


<!DOCTYPE html>
<html>
    <head>
        <title>Headings</title>
    </head>
    <body>
        <h1>This is heading one.</h1>
        <h2>This is heading two.</h2>
        <h3>This is heading three.</h3>
        <h4>This is heading four.</h4>
        <h5>This is heading five.</h5>
        <h6>This is heading six.</h6>
    </body>
</html>

This document displays all six levels of HTML headings. Displayed in a browser, the result should look something like this:

Figure 7: Heading tags rendered in the browser.

Note that by default, the browser displays more important headings as bigger and bolder. However, don’t think of the heading tags as a way to make text bigger; appearance is within the purview of CSS code. It is best to think of heading tags as simply denoting the importance of an individual heading.

aragraph Text

Arguably, the aragraph tag is the most commonly used HTML tag. It is designed to hold a paragraph of text, though it is used by most developers as a generic element that can hold just about anything. Before HTML5 there weren’t too many other options to hold content, so the aragraph tag became a de facto default. In contemporary HTML5 code, however, there exists a plethora of more specific tags that can be used to mark up content. The aragraph tag is still frequently used, but should more or less only be used to demarcate paragraphs within a larger passage of text.

Articles, Details and More

As alluded too earlier, HTML5 introduced a number of new tags used to mark up text. The most popular of these appear below:

Tag	Purpose
<article>	Defines an article within a document
<aside>	A content aside—secondary from the main content
<details>	Used to provide additional details that the user can view or hide in most browsers
<figcaption>	Defines the caption for a <figure> element
<figure>	Self-contained elements like code listings, images, diagrams, animations, etc.
<footer>	Defines the footer for the document
<header>	Defines a header for the document
<main>	Defines the primary content of a document
<nav>	Defines the navigation components of an HTML document
<section>	Creates a section in a document
<summary>	Creates a summary of a document, article or other entity

These tags are meant to allow a document to be more accurately structured. Simply speaking, you should surround your content with whatever tag most accurately denotes the purpose of the content. Some of this can be open to interpretation; however, as long as elements within the document are consistently named, it shouldn’t be difficult to derive meaning from your HTML5 markup.

Typography with CSS

As mentioned earlier, HTML5 is a structural language. It is designed to structure a document and define content elements. HTML5 is not a design language; CSS (Cascading Style Sheets) is the language of design. CSS has a different syntax than HTML, but it is easily deciphered. Below is a typical CSS “rule”.


p {
	font-family: arial, sans-serif;
	font-size: 1.1em;
	color:  red;
}

The “p” in the CSS code above is known as the selector. It allows you to choose which elements the CSS will be applied to. In this case, the CSS styles will be applied to all paragraph elements within the document.

We’ve included three styles to be applied. The first “font-family” style sets the typeface to Arial, or if Arial is not available, any sans-serif font. The next style sets the font size to 110% of the default. The “em” measurement allows the designer to set the font size based on the user’s choice for default size. Multiple the value by 100 to get the percentage of default size. Values greater than one will increase font size. Values less than one will decrease font size. The final CSS style will simply turn the text red.

CSS must be expressed within a style element. Examine the code below:


<!DOCTYPE html>
<html>
    <head>
        <title>First CSS</title>
        <style>
            h1  {
                font-family: Arial, sans-serif;
                font-size: 4em;
                color: red;
            }
        </style>
    </head>
    <body>
       <h1>Hello World</h1>
    </body>
</html>

The result in the browser should appear similar to the screenshot below:

Figure 8: With CSS applied. Note that the text is three times larger than normal, red and rendered in the Arial font.

There are dozens of style rules that can be applied with CSS. Everything from element spacing, to color, to appearance can be controlled with CSS.

This table contains a list of common CSS styles:

Style	Possible Values	Used with Elements
color	#RRGGBB (Red, Green, Blue hex values)	any element that contains text
text-align	left \| right \| center \| justify	block elements h1- h6, p, li, etc.
text-decoration	none \| underline \| overline \| line-through \| blink \| inherit	mostly with a (anchor) elements
text-transformation	none \| capitalize \| uppercase \| lowercase	any element that contains text
line-height	% or px	block elements h1- h6, p, li, etc.
letter-spacing	normal or px value	any element that contains text
font-family	font or font-family [, font or font-family …]	any element that contains text
font-size	px or em value	any element that contains text
font-style	normal \| italic \| oblique	any element that contains text
font-weight	normal \| bold	any element that contains text
background-color	#RRGGBB (Red, Green, Blue hex values)	any element with a background
background-image	url(“[image url]”)	mostly with body
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	mostly with body
background-position	left \| center \| right \| top \| center \| bottom	mostly with body
list-style-type	disc \| square \| circle	ul
list-style-type	decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha	ol

Displaying Media

One of the major advances in HTML5 is the way media is handled. Audio and video media, for example, are now played directly by the browser instead of via a plugin like Flash. This, in part, has led to a proliferation of audio and video content on the web. The inclusion of images, audio and video is fairly easy with HTML5, as you’ll see in the code samples below.

Displaying Images

The way we display static images in a web browser hasn’t changed much in 20 years. There are three file formats that the browser can display: jpg, gif and png. It is preferable to use correctly optimized images that have a minimal file size. Images can be optimized in any graphics editing program like Photoshop. Even though Internet users enjoy more bandwidth than ever before, it is still preferable to optimize images for a minimal file size. This is especially helpful for users who may be trying to access content from a tenuous cellular connection.

The HTML code to display an image looks like this:

<img src="mark.jpg" />

The value of the src attribute is the path and file name of the image. In the example above, the image “mark.jpg” is in the same folder at the HTML file itself, so no path is necessary. Many developers recommend that you include an alt attribute in your image tag. This attribute lets you write a text description of the image, which is helpful to users who might be using a screen reader due to visual impairment.

Audio and Video

Adding audio and video to an HTML document has become much easier over the past few years. Now, all browsers tend to support major audio and video file formats. Just a few years ago, support was more fractured and you couldn’t depend on a specific audio or video file type to work across the gamut of browsers.

The following HTML script plays an audio file called music.mp3.


<!DOCTYPE html>
<html>
    <head>
        <title>Audio</title>
    </head>
    <body>
        <h1>Listen to the Music!</h1>
        <audio controls="controls">
            <source src="music.mp3" />
        </audio>
    </body>
</html>

Every browser has a built-in audio player. While functionally identical, they appear a bit different from browser to browser. The audio tag loads that player. By using the controls attribute, we make controls like play and volume visible to, and adjustable by, the user.

Loaded into the Chrome browser, the audio tag would render a player similar to the screenshot below:

Figure 9: The audio player in Google’s Chrome browser.

To play video with HTML, the code is almost identical. If you have a video file, you can substitute the file name and the video tag for the audio tag.

The following code would play a video with the file name “video.mp4”:


<!DOCTYPE html>
<html>
    <head>
        <title>video</title>
    </head>
    <body>
        <h1>Watch the movie!</h1>
        <video controls="controls">
            <source src="video.mp4" />
        </video>
    </body>
</html>

Browsers have a built-in video player, as well. The following screenshot shows a video being rendered in the Chrome browser:

Figure 10: A sample .mp4 video rendered in the Chrome Browser. Note the video controls superimposed at the bottom of the video.

Hyperlinks

If there is a single advancement that caused the web to explode twenty years ago, it just might be hyperlinks. Hyperlinks give us the ability to jump from one document to another at the click of a mouse. Hyperlinks allowed us to create complex, hierarchical documents that were navigable and dynamic.

Hyperlinks are so common that most developers take them for granted. Hyperlinks—commonly abbreviated as links—fall into two broad categories. External links go from your page to a totally different web site. The second category of links, internal links, select a different page on the current site.

Links can be produced from text or image elements on a page. If you’ve worked with a web interface that included “buttons”, these were likely links. We’ll produce links with the <a>nchor tag.

External Links

External links go from your site to another site on a different domain. For example, if you were linking your site to Udemy.com or CNN.com, these would be external links. For example, my HTML course on Udemy is located at https://www.udemy.com/course/learn-html5/learn. If I wanted to link to that site, I’d write the following HTML:

<a href="https://www.udemy.com/course/learn-html5/learn">Learn HTML on Udemy!</a>

There are two components for us to look at in the hyperlink. The first is the text the user will click on in order to activate the link. This text is placed between the opening <a>nchor tag and the closing <a>nchor tag. In the preceding example, “Learn HTML on Udemy!” would be displayed for the user to click.

The second component to examine in a link is the address where you want the user to go on the web when the link is clicked. In the preceding example, we are using the Udemy address that takes the user to the HTML course.

Internal Links

Internal links are not much different from external links, except for the fact that they take the user to another page within the same domain. Imagine moving from the stock listings to the weather on a news site or one course to another on Udemy. These types of moves are accomplished via internal links. Internal links are structurally the same as external links. Let’s say, for example, you had the following two files:


<!DOCTYPE html>
<html>
    <head>
        <title>Links</title>
    </head>
    <body>
        <p>This is page one.</p>
        <p>Would you like to see <a href="page2.html">page two</a>?</p>
    </body>
</html>

page1.html


<!DOCTYPE html>
<html>
    <head>
        <title>Links</title>
    </head>
    <body>
        <p>This is page two.</p>
        <p>Would you like to see <a href="page1.html">page one</a>?</p>
    </body>
</html>

page2.html

You’ll note that the value of the href attribute here does not include the http:// section. Both page1.html and page2.html are on the same domain, and therefore the http:// is not necessary. Again, the words the user will click to activate the link are between the opening and closing <a>nchor tags, and the links work when clicked in the web browser.

Figure 11: The link to page two is displayed in the web browser.

Conclusion

This primer on HTML was designed to give you a quick start in HTML coding. There is much more to learn and to know before you have HTML coding mastered. I hope this tutorial gave you a good introduction to the art of HTML code. Good luck with your future scripts!

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.

Request a demo