HTML is the code that makes your website go. It’s also the scary part of your website that I usually tell clients and students to click away from if they find it – but today we’re going to look at HTML right in the eye. I don’t expect you to begin coding in HTML (heck, I don’t even do that), but understanding it just a little bit can really save you time and frustration because even though your CMS (content management system) makes adding and editing content easier, sometimes you need to get into the code.
HTML 101
HTML stands for HyperText Markup Language. It essentially tells your Internet browser (Chrome, Safari, Firefox, etc.) how your website is supposed to look and work. There are other code languages that work with HTML (CSS and JavaScript are two that you might recognize) but we’re only going to look at HTML.
Sections and Tags
HTML basically works like this: your website is divided into sections. Each section begins and ends with an HTML tag. The first one in a section looks like this: <tag> and the last one like this: </tag>. We know it’s the end tag because of the slash.
Each web page begins and ends with HTML tags: <HTML> and </HTML>
Within the page is the body. That’s where your web page content lives. The body tags look like this: <body> and </body>
Within your body tags are all of the content on your website including text, images, videos, links, etc. Each of those have their own tags.
HTML Tags Nest
It’s important that each of your beginning and ending HTML tags are nested within each other. Think of Russian nesting dolls. The smaller one begins and ends before the one larger than it, which begins and ends before the one larger than it. HTML is like that. Here’s an example (I added the indents for demonstration purposes):
<html>
<body>
<p>This is where your text goes.</p>
</body>
</html>
That could be an entire web page – a pretty boring one -with one line on it like this:
This is where your text goes.
That’s it!
Common HTML Tags
Here are the common HTML tags that you will see if you look at the HTML code on your website:
paragraph: <p> and </p>
headings: <h1> and </h1>, <h2> and </h2>, <h3> and </h3>, <h4> and </h4>, <h5> and </h5>, <h6> and </h6>
Each heading size has a different number – the smaller the number, the larger the header. In other words, you start with h1 at the top of you page and the next subheader is h2. A subheader for h2 is h3, and so on.
Tags With More Information
Some tags need more information within them, which are called attributes. A link is a prime example, because the code needs to tell the browser what it should be linked to – where a visitor will go when they click or tap on the link.
Any time a tag needs more information, that attribute is contained within quotation marks with an equal sign before it.
link: <a href=”http://www.website.com”>www.website.com</a href>
The text between the link tags are what will show as the link on the web page.
image: <img src=”website.com/image.png” alt=”website image description” width=”150″ height=”100″>
Image tags do not have an ending </img> tag because there is no need to tell the browser that there’s an end to the image. The other attributes within the image tag give the browser the information it needs to properly display the image.
img src = image source (this is the URL location of the image on your website)
alt = alternative text (this is used for people with visual imparities to help them understand the image and can also be used to help SEO)
width: the width of the image in pixels
height: the height of the image in pixels
Troubleshooting HTML
You should be able to look at HTML code and recognize the tags above, which are the most common tags. Sometimes you’ll find that when you copy and paste text onto your website the spacing is off. This is when checking the HTML code can be really helpful.
Common Culprits
Missing Paragraph Tags
Sometimes your paragraphs will be separated in the HTML view, but the text runs together in preview. This is usually because either the beginning and ending paragraph tags are missing or just the the ending paragraph tag is missing.
To fix this, manually add it to the HTML. It’s a pain, but it will fix it. I will type the tag once and then copy and paste it at the beginning and/or end of each paragraph.
Extra Font Tags and Attributes
Sometimes you’ll notice that the text appears in the wrong font or size. That’s because when you copied and pasted it, those attributes were also copied and pasted. This is why I usually write my blog posts right in the CMS. If you have the problem you’ll have to go through and delete those. Here’s an example:
<p style=”font-family:veranda;”>paragraph text</p>
In this case, you’ll need to delete everything within the beginning paragraph tag except the p, so it looks like this instead: <p>paragraph text</p>
Text Alignment
Text should almost always be left justified, and sometimes no matter what you do, it just won’t work. That’s when it’s time to look at the HTML. Sometimes a tag will have several attributes that overwrite each other like this:
<p style=”text-align: center;” “text-align:left;”>paragraph text</p>
Remove the faulty attribute and leave the correct one.
Embedding HTML
The most common type of embedded code is for video. It’s one of the few times when I’ll recommend that you host something on your website somewhere else because video is HUGE and there are so many places where you can host it for free. YouTube, Facebook, and Vimeo all provide the ability to embed a video on your website so that it can be viewed on the page without your visitors needing to leave your site.
You’ll need to copy the code from the site, then on your web page go to the HTML view and paste the video where you would like it to appear. As I’m working on my website in the regular view I’ll add a line with the word “video” as a placeholder. Then, when I’m looking at the HTML, I’ll know right where I need to paste the code. Viola! Video right on your website.
Adding Different Links
There are your basic links that go to a website or document, and then there are links that allow your visitor to send an email or call you. These have become more important as visitors access your website from mobile devices more often than desktop. Have you ever visited a website on your phone and needed to call them, but when you tapped on the phone number nothing happened (and even worse, you can’t copy it)? It’s one of those annoyances – don’t make me have to write it down when I’m already looking at it on my phone!
Using a telephone link will make your phone number a link that allows your visitor to tap it and make the call right then. Similarly, an email link will allow them to tap on the link and a new email will open in their email app with the address already right there, ready to go! The phone link won’t work on a desktop computer, but the email link will.
Here’s how you add these:
- highlight the phone number or email address (it’s important to include the full email address on your website – if a visitor uses a browser-based email system like Gmail they won’t be able to use the link to open a new email, and if that’s the only way they can see your email they’ll be stuck)
- click the link button
- instead of typing in a website, type in:
- phone number: tel:555-555-1234
- email address: mailto:email@website.com
- Save as you would for any other link
When you look at the HTML after doing this, it will look like:
<a href=”tel:555-555-1234″>555-555-1234</a>
<a href=”mailto:email@website.com”>email@website.com</a>
Remember, the text between the tags will be the link on the web page.
You’re on Your Way
There you go! That wasn’t so hard, was it? Of course, there’s a lot more to HTML, but this should have given you a basic understanding and few actionable items that you can use to make managing your website a little bit easier.