If you’ve looked at a page’s source (ctrl+u), opened up the inspector (ctrl+shift+I), or built a web page yourself, you’ve seen HTML in action. If so, this article is probably not for you – it’s more for marketers without this kind of technical background to get them up to speed on the rest of this series.
Here’s a quick guide to HTML:
HTML is FUNDAMENTAL
HTML stands for HyperText Markup Language. HyperText is the text displayed on a computer that provides access to other text through hyperlinks. Markup Language is a computer language that defines the presentation of text on the page. So, HyperText Markup Language is a language made to mark up the presentation of text on the web.
If you look at any type of page (a newspaper, book page, or web page), you can see it has a structure. Similarly, this blog post has a structure, and the structure of this blog post is being described using HTML.
If you spent any time on forums, LiveJournal, or Neopets in the early 2000s, you’ve probably coded HTML before; putting <b></b> or <strong></strong> around text to bold text; <i></i> or <em></em> to italicize text. Email marketers can usually see the HTML markup of what they’ve written and styled. All of those styling choices you’ve already made have to do with HTML.
HTML is basically made up of elements that describe the content that’s inside them; HTML pages consist of Heads and Bodies; <head> for the information about a page, and <body> for what the user actually sees. These are encompassed by an <html> element, which opens and closes the page, to show the page is HTML. The page usually also begins with the declaration of a Doctype.
This is seen as:
<html>
<head>
Information about the page you’re looking at, such as your canonical information, a description of the page’s data, the title of the page, and more.
</head>
<body>
The user visible content on your page; paragraphs, pictures, etc., along with HTML that helps format it.
</body>
</html>
HTML code is made up of HTML elements, which are characters inside angled brackets(<>). Elements are (usually) made up of two tags: an opening tag and a closing tag. Those look something like this:
<p> I’m a sentence, inside an HTML paragraph tag </p>
The <p> here is telling the browser that the sentence is a paragraph.
Each element tells the browser something about the information between the opening and closing tags.
<h1> I’m the main heading, inside an h1 tag</h1>
A more complete version of the HTML doc we made before might look like this:
<!DOCTYPE html>
<head>
<title> This is a demonstration. The title goes in the head</title>
<meta name=”description”> “Meta info goes in the head” </>
<script src=”sodoesjavascriptssometimes.js”></script>
<style> sodo {css:stylesheets;}</style>
</head>
<body>
<h1> You only really want one h1 tag, and your heading goes here</h1>
<p> Content goes here.</p>
<div class=”contentBox”><p>div tags go in the body</p></div>
<iframe allowfullscreen=”” src=”and_iframes” ></iframe></p>
<script src=”sodoesjavascriptssometimes.js” type=”text/javascript” async defer></script>
</body>
</html>
Attributes provide additional information about an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, with an equals sign.
<element attribute=”value”>element content</element>
So, for example:
<p class=”exampleText”> This is a paragraph (p) in English</p>
The attribute name (in the above example it’s “class”) says what kind of extra information you’re supplying about the content.
The attribute value (in the above example it’s “exampleText”) says what the value or setting of the attribute is. Because the above paragraph has the class “exampleText,” we can target it using this class separately from other paragraphs, as an example of why you might want to do this.
In this example, you might want all the paragraphs to be blue, but the exampleText paragraph to be red;
Breaking down how HTML works, we can see a pretty direct pairing between our content and our technical markup. A writer can write “I’m the Main Heading” at the top of the page, but a CMS or developer adding <h1> tags tell machines that the sentence is the main heading. When there’s a disconnect between design and code, this can lead to strange solutions, like resizing headings to be smaller than paragraphs because you want to emphasize one thing to machines and another to human beings—but those actions aren’t giving anyone an honest look at your content.
Some HTML tags mean more than other HTML tags.
You’ll hear some SEOs, primarily technical SEOs, bemoan the use of the <div> tag, especially when used in place of a <p> tag. This is because the <div> tag is meaningless. And I don’t mean that to bully the poor <div> tag—it’s useful and good that <div>s and <span>s mean nothing! It allows them to be used as a way to label areas of a page without being expected to contain semantic meaning.
For areas of the page in which you want to add semantic meaning, there are tons of elements that do just that. The <article> element is an example. From the MDN docs, the <article> element “represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.” To break that down more clearly, the <article> element tells browsers that the part of the page contained within is something like a post, magazine article, or blog entry; part of a page, as a part of the larger whole.
Google has recently been less stringent about asking web developers to be vigilant about using semantic HTML. In a recent video, John Mueller said that Google didn’t need heading tags and could just use CSS styling when trying to understand content. However, you shouldn’t rely on Google being able to understand your styling. For example, how well they understand CSS styling is not clear. Besides, Google is just one user of your site. HTML is a standard that allows any browser to parse and interpret your content. Good HTML is fundamental to providing everyone a positive experience on the web.
Learn More about HTML:
HTML for Marketers || HTML Part 1
by Jessica Peck on January 28th, 2020 | ~ minute read
