What is HTML?
HTML is the language that makes the Internet work!
It isn’t a programming language as such; more a mark-up language that lets you describe what gets shown on any given web page.
These days, HTML has little to do with how that content is displayed; its role instead is to declare what to include on a page without getting into the detail of how to present that content.
How is an HTML web page structured?
An HTML document is split into two parts:
- The head section
- The body section
The body contains the content that you see when you look at that page in your browser. The head section contains meta data: that is, data about the document.
The head section is important as it contains various settings that control how the page behaves but you can’t see the meta data in the head section when you view a web page.
What settings go into an HTML page’s head section?
You may have encountered some of this meta data before as it’s the head section that contains a web page's meta title and meta description.
You’ll also find that the stylesheet rules that govern how to present content on the screen get loaded in the head section, as well as any programming code required by the more functional parts of your page.
What does HTML look like?
HTML consists of a series of tags, which are single word (or sometimes, single letter) instructions contained inside angled brackets.
This instruction, for instance, tells the text to present itself as a paragraph:
<p>I am a paragraph.</p>
Many HTML tags have a natural ending point and its partner tag (which you’ll recognise as the same tag but with a forward slash in it), indicates where that HTML instruction should finish.
One tag might also contain another, so a paragraph with a link in it might be written like this:
<p>I am a <a href="https://www.bbc.co.uk”>paragraph</a>.</p>
You’ll see that the anchor tag (anchor being the word originally used in HTML for a link) surrounds the word "paragraph” and it closes (</a>) before the paragraph closes (</p>).
If you view a web page containing this HTML, you would see:
I am a paragraph.
The word "paragraph” is clickable as it’s contained by the link; the rest of the sentence is not.
What HTML tags are important to me as a content editor or marketer?
If search engine optimisation (SEO) is important to you, you’ll want to be in control of where different heading tags get used throughout your document. There are six levels of headings all told, although it’s unlikely you’ll need to use the lower levels.
You can recognise any heading tag as the single letter h followed by a number, which denotes its heading level.
The h1 tag on your web page will look like this, for instance:
<h1>This is a level 1 heading</h1>
On occasion, particularly in a website’s CMS, HTML tags can be poorly applied and you will want to correct this if you’re responsible for your site’s content.
The <div> tag often gets used in place of something more meaningful, such as a paragraph. A <div> tag is a non-descript element that simply denotes a block of content and it’s likely that if you see these in your CMS, you should correct them to show paragraphs instead:
The toolbar is your CMS should allow you to select the affected text and change its structure to something more appropriate, such as a paragraph or heading tag.
If that's not the case but you have access to your document's HTML code, you can make these changes manually:
<div>Here is some content.</div>
...should become:
<p>Here is some content.</p>
Key things to know about HTML tags
HTML tags are not case sensitive, so <P> is treated in the same way as <p>, although the lowercase version is the more accepted convention.
Some tags will contain attributes that provide further information about what that tag does. The anchor (link) tag that we saw earlier, for example, included an href attribute that contained the URL for that link.
Tags can become broken! If you edit some HTML code and make a mistake or delete something important, the page doesn’t have the facility to self-repair.
Your browser will do its best to make sense of your broken HTML code but you don't want to rely on that if you know that there's a problem.
If the issue is simple to spot, you can make the corrections yourself if you have access to your HTML code.
<p>Here <span style="font-weight:bold">is some content.</p>
In this code block, the <span> tag should get closed before the paragraph tag closes. Perhaps the content editor wanted "is some content" to appear in bold, in which case the closing span tag should be included after the word "content".
<p>Here <span style="font-weight:bold">is some content</span>.</p>
If the issue is more difficult to resolve, you might use an online HTML validator to help you to find the broken code. The validator should highlight anything not semantically correct and if this is simple to spot, you can make the corrections yourself if you have access to your HTML code. The HTML validator at W3C is a useful tool to take a look at.
