Building a website is hard work. And while what you end up seeing at the end of the process is a beautiful site with images, text, and links, there is a very different view on the back end of things.
Every Imagebox website is built in HTML code, the most common markup language for building websites. When building a site, a developer sees letters, numbers, and codes, and these codes then create all of the attractive aspects of the site.
While our development team can code in their sleep, the rest of us with no formal training can struggle a bit more even with simple HTML. I am in charge of placing content on many of our clients’ sites, which means that I need to do some simple formatting to make the page look correct. Our clients often go into WordPress to add blog posts to their site or swap out pictures and text for more fresh content. While this doesn’t require a background in coding, formatting is a lot easier once you understand the basics of how this…
… becomes a website.
HTML 101
Here are two definitions that will make things easier:
Front end and back end – When you are looking at a website, you are looking at the front end. This is the final product and what the public sees. The back end is the code behind the website, which each page is built out of.
HTML – HTML stands for Hyper Text Markup Language. A markup language is composed of markup tags, and while many languages exist, HTML is most commonly used for building websites.
Tags – The sections within HTML are called elements, and these elements begin and end with tags. The beginning of a tag looks like < > while the end includes a backslash to indicate that is it an end tag, < />. While we won’t go over every HTML tag (you don’t have time to read a blog post that long!), here are some of the basics:
<head>
This represents the header of your web page. Every page must have just one. The header includes the title of a web page, which means that the <title> tag is nested within the <head> tag. Nesting simply means that the first tag that you close matches the last tag that you started. Example:
<head><title>Here is a title!</title></head>
This section can also include a description of the site as well as keywords related to the page. These aspects will not show up on the front end but are useful in Search Engine Optimization.
<title>
Just as is the case with headers, every web page needs a title, and no web page can have more than one. The title of a page shows up in three places: Your browser tab, as the title when someone adds your page to their favorites, and in search engine results.
<body>
The entire body of your web page will go within these tags. This includes text, headings, links, images, etc.
<h1> through <h6>
You can assign a level of importance to the headlines on your page by using <h1> through <h6> tags. The “h” here stands for heading, with <h1> being the main headline on the page. Each webpage can only have up to 6 heading tags, and every web page should include an <h1> tag in order to define the content on that page. Heading tags are extremely important for SEO, as it tells search engines which information on the page is important and defines the topic.
<p>
This tag represents a new paragraph. Anything that you want to be included in your paragraph will needs to be between the <p> tag and the </p> tag!
<br />
Spacing is one of the most frustrating parts of code that I deal with when entering blog posts into WordPress. But the most important thing to keep in mind when spacing out content is that <br /> enters a line break into your content. Sometimes, you may see that WordPress automatically adds into your code. This is a non-breaking space, which you can just consider a regular space such as you would get by pressing “enter.”
<a href=”www.imagebox.com”>Hey, a link!</a>
If you want to include a plain-text link on your website, you’re going to need to know about the <a href> tag. This places the link into your document. By including text between your opening and ending tags, you tell the code which text you would like to be linked. In the example above, “Hey, a link!” will send you to www.imagebox.com.
<img src=”https://imagebox.com/wp-content/uploads/2010/08/services-diagram.jpg”/>
Even images are made up of letters and numbers in HTML! The beginning of an image tag is <img src=, with “src” standing for source. Instead of uploading an image in HTML, you insert the URL of an image already hosted online. In this example, the URL is for an image from the Imagebox website. To copy the image URL, I simply right clicked on the photo and choose “Copy Image Address.”
<!– Comment –>
Not everything in HTML code ends up being visible on a finished site. Developers can add notes to themselves within the code in order to help them remember a detail about the code or to help direct another person in writing the code. This tag puts a comment into the HTML document that can be read behind the scenes, but won’t show up anywhere on the front end of the site.
<strong>
Some tags are included in code in order to dictate the style of something. When the <strong> tag is included in an element, it means that the text within that element will be bold.
<em>
Similarly, this tag is used to show emphasis and translates on the front end into italics.
Did you know that you can actually look at the code of a website by right clicking and choosing “Inspect Element”? If you’re confused about how all of these tags look when put together into an actual website, just visit your favorite and get a peek behind the scenes.
If you have an interest in learning more about coding, there are resources available for free online. My favorite is Codeacademy, which takes you through lessons and teaches you the basics of HTML step-by-step. There are more advanced lessons, too, in case you end up turning into a coding pro.
And as for those more advanced coding issues that you might not know the answers to, don’t worry. That’s what our team of developers is here for.