HTML is a vital part of the web as we know it. And while few web designers create pages by manually typing HTML, it's still handy to know a little bit about it.
We're going to look at some basics of the language, including what HTML really is, some fundamental concepts, and how it interacts with other languages. Think of this as an "HTML for dummies" crash course.
HTML Basics: What Is HTML?
HTML stands for Hypertext Markup Language. And while it's sometimes lumped in with programming languages, this isn't accurate.
As a markup language, HTML only lets you create the display layout of pages. A true programming language, like Java or C++, contains logic and commands that are carried out.
While it's simple, HTML is at the backbone of every page on the web. It's responsible for what text shows up as bold, adding images, and linking to other pages. We have an HTML FAQ that explains more.
You can right-click on most webpages in your browser and choose View page source or similar to see the HTML behind them. This will likely also contain a lot of code that's not HTML, but you can sift through that.
Even if you have zero experience with markup or programming languages, learning a bit about HTML will make you a more informed web user. Let's walk through five basic steps to help you understand how HTML works. We'll provide examples along the way.
Step 1: Understanding the Concept of Tags
HTML uses a system of tags to categorize different elements of the document.
Most tags come in pairs to wrap the affected text inside them. Here's a simple example (the
<strong>
tag makes text bold; we'll discuss this more in a moment.)
<strong>This is some bold text</strong>.
Notice how the closing tag starts with a forward slash (/). This signifies a closing tag, which is important. If you don't close a tag, everything from the start onward will have that attribute.
However, not all tags have a pair. Some HTML elements, called empty elements, have no content and exist on their own. An example is the
tag, which is a line break. You can "close" such tags by adding a slash (such as
<br />
) but it's not strictly necessary.
Step 2: The Skeleton HTML Layout
A proper HTML document must have certain tags defined so it's laid out correctly. These are the essential parts:
-
Every HTML document must begin with
<!DOCTYPE html></html> -
Next, the
<head><html> -
Finally, the
<body>
Since the
<body>
section makes up the bulk of an HTML document, the rest of our walkthrough looks at elements that pertain to it.
Step 3: Basic HTML Tags for Formatting
Next, let's look at some common tags that make up HTML documents. Of course, it's not possible to cover every element, so we'll review some of the most important. We've covered many more HTML examples if these don't satisfy you.
If these tags seem pretty basic, remember that HTML was created all the way back in 1993. The web was very much text-based back then in its early stages.
Simple Text Formatting
HTML supports basic text styles like you'd find in Microsoft Word:
-
<strong> -
<em>
HTML also supports the older
<b>
tag for bold and
<i>
for italics. However, it's preferable to use the ones above.
In short,
<strong>
and
<em>
show how something should be understood, while the latter tags only tell you how it should look. These former tags are more accessible for screen readers used by the visually impaired.
Paragraph and Other Divisions
HTML's
<div>
tag lets you define a section of the document. Usually, this is paired with CSS (see below) to format a section in a certain way.
The
<p>
tag lets you divide text into paragraphs. Browsers will automatically put some space before and after these, letting you naturally break up text.
You can add headers to your document and make it easier to follow using the
<h1>
through
<h6>
tags. H1 is the most important header, while H6 is least important. Nearly every MakeUseOf article uses H2 and H3 headers to organize information.
Hitting Enter to add line breaks in your HTML document won't actually display them. Instead, you can use
to add a line break.
Here's an example that uses all of these:
<div class="example">
<h2>Example Heading</h2>
<p>This is one paragraph.</p>
<p>This is a second
paragraph split between two lines.</p>
</div>
Step 4: Inserting Images
Images are a vital part of most webpages. You can add them easily with HTML, and even set different properties for them.
You insert an image using the
<img>
tag. Combining this with the
src
attribute lets you specify where you want the image to load from.
Another important attribute of
<img>
tags is
alt
. Alt text allows you to describe the image for screen readers or in case the image doesn't load properly. You can mouse over an image to see its alt text.
Use the
width
and
height
elements to specify the number of pixels the image appears at.
Put it all together, and an image tag looks like this:
<img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720">
Step 5: Adding Links
The World Wide Web wouldn't be much of a web without links to other pages. Using the
<a>
tag, you can link to other pages on any text.
Inside the
<a>
tag, the
href
attribute tells where you're linking. Simply pasting the URL will work fine. You can use the
title
element to add a bit of text that appears when someone hovers over the link.
A basic link looks like this:
<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>
The
<a>
tag has many other possible elements, but we won't dive into them here.
How HTML Connects With CSS and JavaScript
We've looked at the basic of HTML and how it establishes a webpage. But as you can imagine, HTML alone doesn't cut it for the modern web. Simple HTML webpages were common in the "Web 1.0" days, when most websites were nothing more than static text.
But now, we have a lot more. CSS (Cascading Style Sheets) is a language used to describe how the text you prepared in HTML should look. Remember the
<div>
tag we discussed? Inside this (and other tags), you can define a
class
attribute. Then, in your accompanying CSS document, you can write instructions for how that
class
should look.
You can define these style elements inline in your HTML code, but this is considered poor practice as it's much more difficult to maintain. Learn more with these simple CSS examples. Also check out how to optimize your CSS files.
JavaScript
We've seen that HTML defines the content and CSS determines the appearance. JavaScript, the final member of the trio vital to the web, allows web pages to respond to people's actions without loading a new page every time.
For example, JavaScript allows a website to warn you that the password you entered doesn't meet its requirements before you try to submit it. A web designer might use JavaScript to cycle through images in a slideshow or prompt the user for input.
These are just a few elementary examples. JavaScript is a scripting language that's capable of doing a whole lot, and is comparatively far more complicated than HTML and CSS. See our overview of JavaScript for much more.
Looking at the complete scope of web design is beyond the scope of this article, but suffice it to say that HTML interacts with other languages to create the webpages we know today.
The Evolution of HTML
It's important to note that HTML is not static. HTML has gone through several revisions, the most recent being HTML 5. Notably, this standard supports native video embedding instead of relying on proprietary formats like Adobe Flash.
New iterations of HTML also declare certain archaic tags as deprecated from time to time. These include awful tags like
<marquee>
and
<blink>
(that scroll and flash text respectively) commonly seen in 1990s website design. So keep in mind that standards change over time.
A Little HTML Knowledge Goes a Long Way
We've taken a brief tour of how an HTML document works. Now you know the fundamentals of how webpages are structured. Even if you don't go on to build webpages, you're a bit more aware about the web you use every day.
To learn more, upgrade your web development skills with essential tools and then check out our guide on how to design your first website.
Image Credit: Belyaevskiy/Depositphotos