Content Management Systems (CMS) exist to make updating web content easy for everyone, even without coding skills. Yet, sometimes you need the ability to customize or reformat pages beyond the tools built into your edit screens. This guide is all about the very basics of HTML coding that will (eventually) empower you to tweak pages to your liking. Let’s jump in!
Background
Let’s get on the same page about a few things.
What is HTML?
HTML (Hypertext Markup Language) is both a file format and a language. Files that end in .html have code that can be interpreted by web browsers as web pages.
What does it do?
The way you code various HTML tags (see below) will determine the formatting and functionality of your web page content. There’s another big player when it comes to formatting, called CSS. When used together, HTML and CSS give instructions to web browsers on how to render pages. [Note: This article will just deal with HTML, and assumes your site already has some CSS in place. More on CSS in an article to come!]
How do I use it?
This article is all about how to use HTML from within your CMS dashboard or control panel. The way this works will vary depending on your CMS. The thing to remember is that most CMS platforms only allow you to enter HTML in certain places. Usually, there will be a tab or button that indicates whether you’re in a standard/WYSIWYG view or an HTML/code view.
Anatomy Of A Tag
If I could explain HTML in one word, it would be “tags.” Tags are also called “elements,” and are snippets of code that precede and follow your content in HTML. This is true whether we’re talking about text, images, video, etc. By themselves, they don’t show up on web pages. Rather, they tell the web browser how to handle the content that’s inside them.
There are three main types of tags to know: opening, closing, and self-closing. Here’s an example of each type:
<tag> </tag> <tag />
Most tags require an opening and closing tag. Here’s an example of a heading tag with content inside it:
<h1>I’m a big headline!</h1>
Images are usually self-closing tags, like this:
<img src=”picture.jpg” />
We’ll get into more specifics on these later—for now just note the format of each type of tag when it comes to the <, >, and / characters.
Tag Names
Most tag names are given according to the type of content they house. For example, the paragraph tag (<p>) is intended for paragraphs of text. However, some tags are considered non-semantic, meaning their name is not related to the content inside them. You’ll actually see these a lot, because they are in some ways more versatile. The best example of non-semantic tags are <div> and <span>. I’d recommend thinking of these as just generic content containers. On some websites, there won’t be any CSS (styling) information attached to them, so they may or may not be useful to you.
Attributes
Each tag can have any number of attributes that give the browser more information about formatting or the content inside it. In our previous example of an image tag, the src=”picture.jpg” was a source attribute that told the browser the file path to the image to be displayed. The attributes you can use depend on the tag you’re using.
Most tags can accept a class or id attribute. If you know that your web developer has embedded particular CSS classes or IDs for you to use for styling or functionality purposes, you might add them to a tag like this:
<img class=”big-image” id=”header-image” src=”picture.jpg” />
Again, this is only if your developer has previously set up the class “big-image” (for example) to do something special in CSS.
I don’t recommend trying to memorize all the different attributes you can use in tags at the beginning. Rather, just rely on a handful of code snippets you find useful, and over time, your knowledge will grow! [Note: some code snippets I think will be helpful are listed below.]
Nesting
Some tags have to exist inside other tags to show on the web page properly, and this is called nesting. Perhaps the best example of this is the list item tag, or <li>. This one has to live inside a parent unordered list (<ul>) or ordered list (<ol>). Here’s an example of how that looks in code view:
<ul><li>Item One</li><li>Item Two</li></ul>
You may also choose to indent your code to make it more human-readable:
<ul> <li> Item One </li> <li> Item Two </li> </ul>
Generally speaking, either format will show up the same in a web browser.
Most Common Tags
Here are some code snippets you may come across or want to use. Remember that the way these show up will depend on the CSS code that is embedded in your site.
| Heading 1 |
<h1>This is a heading 1</h1>
|
| Heading 2 |
<h2>This is a heading 2</h2>
|
| Heading 3 |
<h3>This is a heading 3</h3>
|
| Anchor (a.k.a. link) |
<a href=”http://www.google.com”>Go to Google</a>
|
| Image |
<img src=”image_path.jpg” />
|
| Unordered List |
<ul><li>Item One</li><li>Item Two</li></ul>
|
| Paragraph |
<p>Here is a paragraph of text</p>
|
Conclusion
While we’ve just scratched the surface when it comes to HTML coding, I hope this helps set you down a path of understanding what it’s all about!
Further Learning
There are innumerable resources available on the web for learning more. To keep going, check out this great guide from Codecademy, HTML & CSS for Beginners.