A Non-Developer’s Guide to HTML
Everyone who works on the web should have a basic understanding of how HTML works and what it’s used for.
Online business owners certainly don’t need to become full-fledged web developers in order to build an effective website — or run a successful business.
But those whose entire careers are built online will inevitably find themselves in a position where having some knowledge about how their websites actually work might come in handy.
Whether you’re just making some basic adjustments to your website or integrating some third-party marketing tool, a basic understanding of HTML could save you hundreds (or even thousands) of dollars in web development fees.
In this short guide, which presumes absolutely no prior knowledge of the language, I’ll provide you with a basic overview of HTML — what it is, and how it works. I’ll also give you some resources for taking your learning even further, if you so choose.
What Is HTML, and What Is It Used For?
HTML stands for Hypertext Markup Language. It is the standard language for documents that are designed to be displayed in web browsers — i.e. websites and web applications.
On its own, however, it is incapable of creating anything more than extremely basic web pages. In order to create fully-functional websites and applications, developers will need to use additional languages like CSS and JavaScript.
In relation to both of those other languages, HTML is often spoken of as consisting of the “nouns” (or things, elements) that make up a website.
By contrast, CSS is likened to the “adjectives” of a website in that its function is to modify how the HTML appears. JavaScript, then, can be likened to the “verbs” of a website because it provides functionality and interactivity to the HTML elements.
To get a basic sense of what HTML looks like, and what it does, consider the markup below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading.</h1>
<p>And this is a paragraph.</p>
</body>
</html>This is an example of an extremely basic HTML-based web page.
The <!DOCTYPE> declaration and <html> tags define the content as HTML document, and help the browser correctly display the code.
The <head> tag contains the page title, metadata, and other important information related to the web page. It also includes the meta tag, which defines the character set for the document.
The <body> tag, meanwhile, is used to enclose all of the content that will actually be displayed on the web page itself.
Consisting of just two HTML elements — an H1 heading and a paragraph — this markup, when rendered in the browser, would output the following.
Note that only content written within the <body> section of an HTML document is actually displayed in a browser window.
Most of the information contained within the <head> section will never be seen by the end-user. Notice, however, the title content displayed at the very top of the web page.
The Basics of HTML
Let’s dive in a little bit deeper now, shall we?
Before you can start actually writing and editing HTML, there are three main components (or building blocks) that you’ll need to understand. They are tags, elements, and attributes.
I’ll discuss each one of these components in detail below.
Tags
HTML tags are used to distinguish HTML code from normal text. They provide browsers with instructions on how to display the content contained within them.
Typically, these tags come in pairs — such as <p> and </p>— and flank a single piece of content, as in the following example:
<tag>Content</tag>The first of these tags is called the start tag (or opening tag), and the second is the end tag (or closing tag). It should be noted that not every HTML element consists of paired tags —some contain just one tag — however, these are exceptions to the general rule.
Learning HTML requires studying these various tags and learning how they behave to form a complete document. You can find a comprehensive list of these tags, and what they do, at Mozilla’s excellent developer website.
Elements
An HTML element consists of both the opening and closing tags, along with any content that appears within them.
<p>This is a paragraph element.</p>These elements can be quite small, in the case of paragraph elements or headings. Or they can be large — e.g. an entire body element, which itself consists of several smaller elements — as depicted below.
<body>
<h1>This is a heading.</h1>
<h2>This is a smaller heading.</h2>
</body>Nested HTML elements like this are very common — particularly in the case of div elements, which are invisible “containers” of HTML content.
If you’re using Google Chrome, try right-clicking on this website and click “Inspect” to look at all of the nested HTML elements — and div elements — on this website. (Use the small arrows to expand content.)
Attributes
HTML attributes provide browsers with additional information about their corresponding elements.
One of the most common attributes is the href attribute — which defines a URL address for link (or anchor) elements, represented by the <a> tag.
<a href="https://www.medium.com">This is a link to Medium.com</a>In the above example, the URL address (https://www.medium.com) is the value of the href attribute. Note that attributes appear only once within the opening tag, and their values appear within quotation marks.
Additional Resources
Now that you’re all caught up on the basics, you’re ready to start writing some actual HTML code.
The first thing you’ll need to get started is some sort of code editor.
My personal favorite, and the one I recommend most often, is Microsoft’s (free!) Visual Studio Code. It’s infinitely customizeable, and suitable for beginners and expert developers alike.
Another great place to start is CodePen, which offers a free online platform for writing and viewing your code!
Fire up either one, and pull up Mozilla’s aforementioned reference page to keep handy. Then you can start plugging in some different HTML elements to build your very own web page from scratch!
Stuck for ideas on what exactly to build?
Try copying the following markup into your editor, and see what comes up! You might even take a stab at replacing some of the nested<body> elements with your own.
The best way to learn is by tinkering around.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body>
<h1>This is an H1 Heading.</h1>
<h2>This is an H2 Heading.</h1>
<p>And this is a paragraph.</p>
<ul>
<li>This is a list element.</li>
<li>This is a list element.</li>
<li>This is a list element.</li>
</ul>
<a href="https://www.google.com">This is a link to Google.</a>
</body>
</html>Did you try it out? It’s nothing fancy, I’ll admit.
But that’s because all we’ve done at this point is create a bunch of unstyled “nouns” and throw them up on a webpage.
In order to make all of this look like an actual website, we’ll need to incorporate some CSS — the “adjectives” that will change the appearance of our HTML.
That will be the subject of my next post.
So have fun tinkering away at HTML, and be on the lookout for my next post: “A Non-Developer’s Guide to CSS.”
