Blog

Modern content management systems (CMS) and website builders, such as Squarespace and Wix, do everything in their power to make the process of web development as code-free as possible. These services offer pre-built templates and user interfaces akin to Microsoft Word to make website editing a less stressful experience, thus eliminating the need to tread through countless lines of code. But even in this drag-and-drop utopia of ours there comes a time when you need something a little more than your standard text editor tools. Your eyes slowly focus onto that horrifying acronym “HTML”, your palms sweating from the anxiety of clicking this forbidden object. With a shaking hand, you and your noble steed (mouse) courageously venture into this alien world only to find an undecipherable mess of words and symbols; panic ensues. But fear not traveler! Together we will navigate through the forbidden land of HTML.

HTML is very similar to written text, except that everything in the document is wrapped in between an opening and closing “tag”. These tags are in place to communicate to your web browser what it is seeing. An example would be:

<p>Hello!</p>

The word “Hello!” is wrapped in a <p> tag, or a paragraph tag. Your browser reads this tag and knows that “Hello!” should be a paragraph element and renders it accordingly on your monitor. Pretty simple right?  There are many different types of tags and each tag renders text differently. If you wanted to make “Hello!” a title or heading you would use a heading tag.

Example:

<h1>Hello!</h1>

This is a Heading 1 tag. This tag, by default, will render “Hello!” in the style of a page heading. There are more heading tags such as <h2>, <h3>, <h4>, and so on that can be used for sub-headings.

To add a link to a page, you wrap the word you wish to link in an <a> tag.

Example:

<a href=”www.yoursite.com”>Your Site</a>

The “href” is where you include the web address of the site you wish to link. Then, in between you place the word or phrase you want your users to click to go to the site.

If you wanted to create a list, there are two options. For a normal bulleted list you would use an unordered list. For a numbered list you would use an ordered list. They are basically the same except one is <ul> and the other is <ol>.

Example 1:

<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Coffee</li>
</ul>

Example 2:

<ol>
<li>Preheat Oven</li>
<li>Mix cookie dough</li>
<li>Realize you’ve eaten all the cookie dough</li>
<li>Question your life choices</li>
<li>Go to store for more cookie dough</li>
<li>Bake cookies for 10 minutes</li>
</ol>

With lists, you need two HTML elements. The list type (<ul>) and the list items (<li>). The <ul> list will have bullets by default, and the <ol> will be numbered by default.

One of the most common elements you will see in HTML is the <div> tag. A div is simply a container element.

Example:

<div>
<p>I am</p>
<p>inside a</p>
<p>div</p>
</div>

Div tags are used to separate blocks of code from one another and are also used in conjunction with classes and ID’s so that you are able to target specific <div> tags and style them as needed.

Another common element is the <img> tag. This tag, very obviously, is used to include an image onto your page.

Example:

<img src=”/images/flower.png”>

Image tags look a little different than other tags, but they work in the same manner. The src simply stands for “source” and the “/images/flower.png” is the file path to the image. So in this example the website will look in the images folder for a file named flower.png. This makes changes images very simple. If you wanted to change your flower image to a tree image for instance, all you need to do is update the file path.

Example:

<img src=”/images/tree.png”>

And the last HTML tag we will discuss is the <table> tag. No matter what you’ve heard in the past, the <table> element is NOT used for page layout. Tables are only used for tabular data like the following example:

<table>
<tbody>
<tr>
<td>Monday</td>
<td>9:00am – 5:00pm</td>
</tr>
<tr>
<td>Tuesday</td>
<td>9:00am – 4:30pm</td>
</tr>
</tbody>
</table>

This is a basic table setup. All tags need to be present for the table element to render correctly in the browser. <tbody> stands for table body, <tr> stands for table row, <td> stands for table data. On a webpage it will look like:

Monday	9:00am – 5:00pm
Tuesday	9:00am – 4:30pm

Need to add another row? Just add another <tr> section!

<table>
<tbody>
<tr>
<td>Monday</td>
<td>9:00am – 5:00pm</td>
</tr>
<tr>
<td>Tuesday</td>
<td>9:00am – 4:30pm</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Closed</td>
</tr>
</tbody>
</table>

Which will display:

Monday	9:00am – 5:00pm
Tuesday	9:00am – 4:30pm
Wednesday	Closed

And that’s a basic overview of HTML! There are many more HTML tags, but the elements we reviewed are some of the most common you will need to use when updating your site. Luckily, there is a wealth of information available on the internet if you ever need to look something up. One of my favorite resources http://www.w3schools.com. As with anything new it can be confusing at first, but stick with it and you’ll be surprised how quickly you begin to pick it up.