Textbroker’s Guide to HTML

Alex from Author Services gives a good overview of basic HTML functions to make your content pop!

Hello! My name is Alex, and I work with Textbroker Author Services answering technical questions and providing support to our authors among other responsibilities. Far and away the most common technical question that we receive is, "How do I make a _______ in HTML?" These questions are always interesting to me. I'm pretty tech savvy, and I study programming and Web design as a hobby, so tech-speak and the language of the Web comes easy to me. However, most of our authors don't have a background in web coding and don't have time to learn a whole new language, so I always have to make my answers approachable even to someone who has no experience with these kinds of topics.

With that in mind, I set out to create a guide that our authors could quickly reference when they had a question about HTML. I promise to not use any fancy terminology, make no fancy analogies, and tell you in a straightforward way exactly how to do the thing you're trying to do. Just search below to find your "tag," and voila – easy to follow instructions!

How Does HTML Work?
HTML is the language of websites. Webpages appear to be clear-cut, easy to read documents, but they come in all shapes and sizes. How do you tell a webpage where an image goes? How do you tell it to make a table and put it somewhere? Well, you need a special code for it, and that code is called HTML.

HTML takes a regular text document and use little codes, called "tags," to paint a webpage on your screen. If you just write a website in plain text, it will show up as plain text, with no background, no bolding or italicizing, no images and no fancy fonts. Tags tell your browser to do all these things to the page and the text.

A simple tag looks like this:

< strong >Hi guys!< /strong >
This results in:
Hi guys!

All tags are enclosed in little angle brackets, "< " and " >". Anything inside "< " and " >" is read as a code, so it's not displayed. That means that anything you put inside the brackets won't show up on the webpage – instead, it will tell the webpage to do something.

The "< strong >" tag tells the browser to start painting something. The "< /strong >" tag tells it to stop. If you don't tell it to stop, it'll just keep doing it to the end of the document – so, as a rule, always tell it to stop. Different tags have different effects. In this case, the < strong > tag makes the text bold. Most tags are an abbreviation of their effect, so < strong > is for bold, < em > is for italic, and < u > is for underline. There's a full list below, so I won't go into excessive detail. You can also combine tags like this:

< strong >< em >< u >Bold, italic and underlined all at once!< /u >< /em >< /strong >
Bold, italic and underlined all at once!

When should I use HTML?

For Textbroker, the simple answer is to accommodate a client's request. Many articles written for the service will need to be tailored to the Web, so clients will often ask you to format the article a particular way and include some HTML code to make it look nice and meet their needs.

Please don't include HTML when not requested to do so. Many orders aren't going directly on the web! HTML isn't really used outside of the Web, so the client will need to trim out your codes or request a revision, and you'll have wasted a bunch of time adding things that didn't need to be there in the first place.

There are also two tags that you don't need to put in at Textbroker: < p > and < br >. These are just codes for a carriage return and a double spaced carriage return, and Textbroker does this automatically for you. Only use these at the request of a client.

The Quick Reference:

Below is a list of tags, sorted by what you want to do. Remove the spaces before and after the brackets to get the code to work. HTML codes should always be lower case.

OK, I want to…

Make Text Bold: < strong >
Place < strong > and < /strong > at the start and end of the text. Example:

This text is < strong >BOLD!< /strong >
This text is BOLD!

< strong > and < /strong > do the same thing as < strong > and < /strong >
Textbroker Tip: Our word processor on the website has an easy button for this! It's the "B" button. Highlight the text and click the button to make that text bold.

Make Text Italic: < em >
Place < em > and < /em > at the start and end of the text. Example:

This text is in < em >italics.< /em >
This text is in italics.

Textbroker Tip: Our word processor has an easy button for this! It's the "I" button. Highlight the text and click the button to make that text italic.

Make Text Underlined: < u >
Place < u > and < /u > at the start and end of the text. Example:

This text is < u >underlined < /u >.
This text is underlined.

Textbroker Tip: Our word processor has an easy button for this! It's the "U" button. Highlight the text and click the button to make that text underlined.

Make a Header: < h1 >,< h2 >,< h3 >,< h4 >,< h5 >, and < h6 >
Header tags are generally used for headings and subheadings. Most clients will tell you which one to use. These tags just make the text really big. H1 is the biggest and is often used for titles. H2 is the next largest and is usually used for subheadings. H3, H4, H5, and H6 may also be requested, and they are really just smaller sizes of the above.

To insert a header:

< h1 >A Tale of Two Cities< /h1 >

This results in:

A Tale of Two Cities

Here's an example of the rest of the "H" tags in use:
 

H2 is big!

H3 is medium.

H4 is average.

H5 is small.

H6 is the smallest.

Textbroker note: On our site, H1 tags result in orange text on the preview screen. This is normal!

Make A Numbered List: < ol >

"OL" stands for "Ordered List". First, put an < ol > code in to start the list:
< ol >

Then, for each entry in the list, use the < li > tag, and then add the text. "LI" stands for "List Item".
< li >Item One < /li >
< li >Item Two < /li >
< li >Item three < /li >

Finish the list with < /ol >. Your final product should look like:
< ol >
< li >Item One < /li >
< li >Item Two < /li >
< li >Item three < /li >
< /ol >

Which results in:

1. Item One
2. Item Two
3. Item three

This code adds in the numbers for you, so there is no need to worry about keeping track of numbers!

Textbroker Tip: Our word processor has an easy button for this! It's the Numbered List button. Click the button, and enter the items on the list one at a time, and it'll insert the code where your cursor is.

Make a Bullet List: < ul >

"UL" stands for "Unordered List". First, put a < ul > code in to start the list:
< ul >

Then, for each entry in the list, use the < li > tag, and then add the text. The letters "li" stands for "List Item".
< li >Bullet one < /li >
< li >Bullet two < /li >
< li >Bullet three < /li >

Finish the list with < /ul >. Your final product should look like:
< ul >
< li >Bullet one < /li >
< li >Bullet two < /li >
< li >Bullet three < /li >
< /ul >

And it looks like:

• Bullet one
• Bullet two
• Bullet three

Textbroker Tip: Our word processor has an easy button for this! It's the Bullet List button. Click the button, and enter the items on the list one at a time, and it'll insert the code where your cursor is.

Make a Link: < a href="…" >
"A" stands for "anchor" but really means link. Don't ask me why – it's one of those unsolved mysteries. "Href" is short for "hypertext reference," and in the interest of brevity, I won't explain exactly how all that came about. This is what you do to get it to work:

A link has two parts. You have the text of the link and the web address that it takes you to when you click on it. Let's say I have this sentence:

Please visit our Textbroker Homepage!

I'd like to make the words "Textbroker Homepage" turn into a link that will take you to www.textbroker.com. In order to do so, start with an < a href="…" > tag, and put the website into the href="…" field. Always include the full address, including the "http://" or "https://".

< a href="https://www.textbroker.com" >

Next, put the text that you'd like to show to your reader:

< a href="https://www.textbroker.com" >Textbroker Homepage!
Finally, close the a tag with < /a >. Don't repeat the href part.

Textbroker Homepage!

In a sentence:

Please visit our < a href="https://www.textbroker.com" > Textbroker Homepage! < /a >

And it looks like this:

Please visit our Textbroker Homepage!

Textbroker Tip: Confused about what a href is? Me too. Our word processor has an easy button for this! It's the button that looks like a chain link. Highlight the text that you want to turn into a link, press the button, and paste the web address into the box that appears.

Make a Table: < table >

Remember when I said that you have to tell the computer how to paint the webpage? Tables are a good example of that. Tables aren't hard, but they are scary at first glance! Follow the below instructions, step by step, for each element of the table, and you should get a great result.

Each table starts with a < table > tag and ends with a < /table > tag. Most tables want a border, so put a border="1" in your table tag as shown below. Quotation marks are required!
Each table is divided into rows. Start a new row with a < tr > tag. End each row with a < /tr > tag. "TR" stands for table row.
Each row is then divided into cells that contain text, much like the cells on a spreadsheet. Use < td > to indicate a new cell, and < /td > to end a cell. TD stands for something obtuse — it means table cell. Trust me.

To build a table, put a < table > tag where you want the table to start. Then, add a row with < tr >. Add as many cells as you like in that row with < td > and < /td >. Then, close the row with < /tr >. An example will help you visualize:

< table border="1" > [The table starts here!]
< tr > [First row]
< td >Hi everybody!< /td > [First cell in row 1]
< td >This is a table!< /td > [Second cell in row 1]
< /tr > [end of first row]
< /table > [end of table]

This is a simple one-row table. [Brackets] are my notes – obviously, don't put those in. It looks like this:

To add another row, add another TR tag, and then add cells:

< table border="1">
< tr >
< td >Hi everybody!< /td >
< td >This is a table!< /td >
< /tr >
< tr >
< td >It's time for row two.< /td >
< td >I used a < strong >bold tag< /strong > within a table!< /td >
< /tr >
< /table >

Simple, right? As long as you build tables one row at a time, they don't become an unweildy menace. Just keep laying down rows and cells until you're done, and make sure that every tag has a < /tag > buddy.

Troubleshooting: Some of my text went missing or is in the wrong place! The table is all messed up!
One of two things happened here: you either put text in without a cell (< td >) tag, or you didn't close a tag with its < /tag > buddy. Go from start to finish and make sure your table has a < /table >, your rows all have < /tr > tags, and your cells all have < /td > tags.

Textbroker Tip: You can use the new "Paste from Word" feature to add tables. Make your table in a Microsoft Word document, copy the table, and then click the "Paste from Word" button that looks like a clipboard with blue "W" attached. Paste the table in the box and hit OK. The code for the table should insert itself where your cursor was. This only works in Microsoft Word – other word processors will generate a really awkward result, so just don't try it.

Add a Meta Tag: < meta … >
A meta tag provides the web browsers with additional information about the page. Meta tags are never displayed. These are simple, and usually, the client will request the one that they want. Here's the format:

< meta TYPE="information goes here" >

Change TYPE depending on what you want to do. The quotation marks are required. Each type of meta tag has a different purpose. The two most common meta tags are description tags, which provide a description of the webpage for Google, and keyword tags, which provide some key words that search engines reference.

< meta description="A description of the article that appears under the link from Google goes here." >
< meta keywords="keyword1,keyword2,keyword3,keyword4,etc" >

These tags will disappear in the preview screen. They're still there in the background, but the whole point of these tags is to provide information to the web browser without showing up, so don't be surprised when they do just that and don't show up.

Help! My whole document is bold/italic/underline/a link!

You probably forgot to close a tag. If you just type < strong > somewhere in the text, your browser won't know when to stop bolding text, so it'll just bold everything past that point. That's usually undesirable. Find the starting point, look for the tag in your code, and put a < /strong >,< /em >,< /u > or < /a > where you want the format to stop.

Occasionally, the client will forget to close a tag in their instructions, so if your whole document is bold and you have no code, you didn't do anything wrong! Please let the client know what most likely happened in this case via the messaging system.

This covers the most common HTML codes. I hope that you found this blog informative and that you can put it to good use in your work here with our service. There are many codes I didn't cover here, but all codes work basically the same way, and a simple Google search for the requested tag will turn up plenty of info. Thanks for reading! May all your tables turn out perfectly on the first try – even if mine never do.