HTML Coding for Authors

HTML tags are critical to any webpage. Some might say that HTML, or Hypertext Markup Language, is the glue that holds the internet together. HTML is also an important component of SEO.

Michella

Textbroker Author Services Rep

HTML tags work behind the scenes of a webpage to keep it organized and easy to read. An acronym for Hypertext Markup Language, HTML determines the appearance of your page, including fonts, headers, images and lists. It also plays a key role in SEO. As an author, you should have a basic understanding of this simple language and be able to use HTML coding whenever a client requests it.

The biggest thing to keep in mind with HTML is that all HTML code begins with an open tag and ends with a close tag. Without both an open and a close tag, the HTML will not run.
 

HTML Coding For Headers

Headers include not only the title of the page of content but also the subheadings used to break up the sections that follow. By using variations of the header tag, you can determine the size of each title and subtitle.

For example, the main title of a page is typically an H1 header. In the Textbroker system, words surrounded by H1 tags appear much larger than the standard text:

This is an H1 header

To get this effect, you would use this tag:

You can also scale down your header sizes within your text as needed. Your client will typically tell you how small to go, but most commonly, you will use H2, H3 and sometimes H4 tags to make your content more orderly and accessible to readers. For comparison purposes, here is what H2, H3 and H4 headers look like:

This is an H2 header

This is an H3 header

This is an H4 header

The tags look like this:

HTML Coding for Hyperlinks

Hyperlinks are the glue that hold the internet together. They provide an instant method of navigating to another location, and they are important to SEO. Clients frequently ask that you include hyperlinks to reputable outside sources in your content because they give a webpage added credibility.

In general, websites that qualify as reputable for SEO purposes are non-commercial sites that do not compete with the client’s website. URLs ending in .edu, .org and .gov are usually good choices, but you have to use your judgement when you are selecting sites to use in a hyperlink. Search engines work on the assumption that if a site is linked into a network of legitimate websites, it must also be legitimate.

Like all other HTML coding, a hyperlink is enclosed within angled brackets. Textbroker has a built-in tool you can use to create hyperlinks, so you do not necessarily need to memorize the tags.

To use Textbroker’s hyperlink took, you simply highlight the word or phrase in the content that you want to make your anchor text, right-click on the link icon in the tool bar, paste in the entire URL (including the http://www.) and click “okay.” The anchor text will turn orange when you press the preview and submit button, but the coding will not be visible.

If you were to add the hyperlink code manually, however, you would use:

Fill in the actual webpage URL you’re linking to between the quotation marks, enter the text that will become the hyperlink, and end with close tag. For example, when linking to the Textbroker homepage in a sentence, it would look like this:

Embedded Images and HTML Coding

If the instructions for an order ask that you either embed an image provided by the client or find a copyright-free image to include with the article, you can place it where you want it to be in the content using HTML tags. Like a text hyperlink, an image hyperlink ramps up the content’s SEO power because it connects the website on which it appears to another resource on the web. Also, photos make content more user-friendly.

The code sequence starts with an img src tag. Then, you paste in the location of the image, which is the URL. You can add alternate text, which acts as an alternative display for search engines, and as a text display for the visually impaired. Alt text can also help boost SEO, if the client requests it.

So, the HTML for embedding an image by Kaas Pathar would look like this:

With an alt tag added, it would look like this:

When it runs, it will just load the image:

Text Enhancements and HTML Coding

Oftentimes, you want to enhance a heading or phrase within your content, but you do not want to use an H1 tag. Simply highlight the portion of the text to be emphasized, click the “B” in the Textbroker tool bar, and it inserts the code to embolden your selection. Alternatively, you can add the code yourself by surrounding the text you’d like to emphasize with strong tags.

The same is true of the “I” icon for italicizing your text. Or, em HTML tags can be added manually. Also, if you wish to underline a word or phrase for emphasis, highlight it, and then, click the “U” on the tool bar. You may instead place u tags at the start and end of the text you choose to underline.

Once you save and submit, you will see the bold, italic or underlined text rather than the code.

It should look like this:

And will look like this on the page:

This text will appear in bold typeface

This is how we Italicize text

This text is underlined
 

HTML Coding for Lists

Bulleted lists make key information easily accessible when your reader is quickly skimming the page. Visually, these kinds of lists break up blocks of text that might otherwise scare off readers. To code a bulleted list with HTML, you can use the bullet feature in the Textbroker tool bar.

Enter your list in the text box, and then, click the three-line icon. Copy and paste each list item into the boxes provided. When you are finished, place your cursor in your text where the list should go and click “insert a list.”

The manual coding begins with a ul tag, which stands for “unordered list.” Each list item should then be surrounded by li and tags, with the list ending with a final close ul tag. Your finished product should look something like:

It will look like this when it runs:

• Bullet item one
• Bullet item two
• Bullet item three

Rather than bulleted lists, you may wish to use numbered lists in your content. These are great for writing out steps in a sequence or for listicles. Instead of the ul tags required for unordered lists, numbered lists will use ol tags. The “ol” stands for “ordered list.” The tags for each list item are the same as in bulleted lists. So, a numbered list will look like:

It will look like this when it runs:

1. Item one
2. Item two
3. Item three

HTML Coding and Tables

Sometimes, clients will ask you to insert a table into your content. For example, if you are listing line items along with color, size, style and price, your client may want that visually organized in a table format. When you create an HTML table, your coding indicates the arrangement of headings, columns and cells.

You will find that the HTML code for each component is different, but each follows the same general format you use for everything from headings to hyperlinks. For example, you can use “table” tags to create a table.

You indicate a cell with “tr” in brackets and end with “/tr” in brackets. The tag for a table header is “th,” and the tag for the body of the table is “td.” Here is the HTML for a simple table:

This is what that table would look like on the webpage:

Name	Age	Favorite Color
Sally	6	Blue
Anne	5	Purple

 

Other Resources for HTML Coding

You can find a number of online resources and tutorials on HTML coding for website content. Once you understand the basics, you will be able to easily incorporate HTML into your content whenever your clients ask for it. Take a look at the following resources for additional help with coding and checking your work:

• https://html.com/
• https://www.w3schools.com/
• https://validator.w3.org/

Begin your freelance career by writing at Textbroker.
Sign up today!

Register for Free!

• May 16, 2019
• May 16, 2019


• Michella
• Blog, For authors, SEO
• 3 Comments