Intro to Html

It is common for a modern day office worker to be required to update a company website. This article quickly outlines basic HTML with the intent of teaching someone enough to edit a page of a corporate website which uses a Content Management System(CMS).

Most Content Management Systems (CMS) have a What You See Is What You Get(WYSIWYG) editor. A WYSIWYG editor does most of the work for you; however, when an error occurs you need to know what is going on behind the scenes to fix the problem.

To keep this article as simple as possible, I’m only going to talk about some common HTML Tags and adding a class attribute.

HTML Tags

HTML markup tags are keywords surrounded by angle brackets in a plain text document.
In most cases HTML tags are paired with an opening(start) and closing(end) tag.
Here is an example of the most common tag, the paragraph tag.

<p>
The paragraph tag goes around a paragrah in your article.  
It tells the web browser to give a margin to the paragraph
so it is easier to read.  When a browser reads an HTML document
the line returns(your enter key) are ignored so you have to tell
the browser what a paragraph is.
</p>

The Comment Tag

Before I go any further I need to explain how the HTML comment tag works, because I’ll be using it to explain my examples. Here is how w3 schools exlpains a comment tag

The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

Here is an example of a comment.

<!--
Nothing between the comment tags will be visable on a page the browser has rendered.  
It is great for explaining what is happening inside the source code of a HTML page.
-->

Common HTML Tags

Here are some HTML tags commonly used on an ecommerce or marketing website. You will usually find these tags either in the page content or product description.

source code:

<!-- Create a Heading -->
<h1>Heading 1</h1>

<!-- Headings work the same as in a text editor -->
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

<!-- Add emphasis to a piece of text, used within a p tag. Usually used for italics -->
<p>The quick <em>brown</em> fox.</p>

<!-- Make text strong, used within a p tag. Usually used to make text bold -->
<p>The quick <strong>brown</strong> fox.</p>

How the browser renders the code:

HTML Attributes

Sometimes you need to tell the browser further information about a tag.
For example the anchor tag creates a link to another article and you have to tell the browser where the article is. The following will create a link like this

<a href="https://www.nickyeoman.com">a link like this</a>

Notice how we added the href attribute to the tag, it tells the browser where to go when the link is clicked.
Another example of a tag that uses attributes is the image(img) tag.

<img src="images/banners/client.png" alt="This is a banner" width="125" height="125" />

The image tag in one of the tags that only uses attributes to relay information to the browser.
You will notice there is no closing tag, just a slash before the tag is closed.
src, alt, width, height are all required attributes of the image tag, you can read more about HTML images at w3c schools.

HTML Attributes Class

The last attribute I want to talk about is the class attribute.
The class attribute can be added to almost any html tag and is intended to tell the browser how to style an element. The Cascading Style Sheets(CSS) will define the styles of the class, and the browser will then render how the element looks.

<div class="classname"></div>

Reference

• HTML intro w3c
• HTML comment tag - w3c