HTML Resources for 2018

HTML is one of the most common topics Author Services receives questions on. If you’re new to HTML or coding, it can seem a bit intimidating at first, but ultimately, it’s a great tool for precise formatting and making your text look great.

Nate

Textbroker Author Services Coordinator

What is HTML?

HTML stands for hyper-text markup language. Markup languages simply use tags to note that a certain section of text is special or should look different. In HTML, these tags are surrounded in angle brackets or greater-than and less-than signs. For example, the <strong> tag would be used around a word or phrase that needed to be bold. The closing tag, which is the tag at the end of a selected string of text, contains a forward slash like this </strong>.

Why Use HTML?

We are occasionally asked why we use HTML instead of a simpler what-you-see-is-what-you-get (WYSIWYG) editor. HTML is the language of the web. Whether you’re working in a popular platform like WordPress, using a site editor like Dreamweaver, or getting your hands dirty and coding the site yourself, content written and formatted in HTML will always fit right in. Additionally, because HTML is written in plain text, there are great editors on every platform and operating system that support it.

How do I use HTML on Textbroker.com?

Because a lot of clients request HTML formatting in their orders, the Textbroker order editor has HTML formatting tools built in so that you usually won’t need to write a single line of your own HTML code.

Formatting Text (Bold/Italics/Underline)

To format a word or sentence, you should highlight the sentence and use the desired formatting button to apply HTML tags to that selection. For example, to underline the text “This text should be underlined” in the editor below, you would click the “underline” button in the editor toolbar.

Which will surround the selected text with <u> tags so it looks like this:

When you preview this text, the HTML will render so that you can see what the content would look like on a webpage. In this case, it would look like this:

While you can certainly write in the HTML tags yourself, we find that highlighting a selection and clicking a button is a more familiar workflow to a lot of authors.

Hyperlinks

A hyperlink (or just “link”) is a formatted, clickable piece of text on a webpage. It’s important to know the difference between a link and a URL. A URL is a bare address to a web site or page, and usually begins with http:// or https://, such as https://www.textbroker.com. Many web browsers automatically make URLs clickable, but they’re still not very pretty, and many clients prefer hyperlinks. A hyperlink is a word or phrase (not a URL) that, when clicked, directs the user to another page, like this. Hyperlinks are cleaner and do not interrupt the flow of a piece of text. To insert a hyperlink in HTML, you would use an <a> tag. In Textbroker’s order editor, you can simply highlight the word you want to turn into a hyperlink and click the link button, like below.

When you click this button, a popup box will appear asking for the URL you would like the link to direct to. You should paste the URL into this box and click OK.

This will create an anchor tag link. The code will look like this:

The <a></a> tags tell the HTML render to make the text clickable. The text between the tags themselves (between > and <) becomes the clickable link, and the URL in the href attribute is the destination the user is taken to when clicking on the link. It’s important that the URL in quotes begins with http:// or https:// so that the browser knows it’s a web page. It’s also important that the URL is in quotes and that the closing anchor tag goes immediately after the word you want to make into a hyperlink.

Bullet Lists

To insert a bullet list into your text, use the bullet list button below. You don’t need to highlight any text first to use this feature.

Clicking on the bullet list button brings up the dialog pictured below.

You can type the content of each bullet list item into the boxes presented. If you need more than three, you can click “Add item to list” to add as many bullet points as you need. Once you’re done, you can click “Insert a list” to have the editor properly format the HTML of your bullet list and insert it into the text. The code will look like this:

Note that “ul” stands for unordered list, which is a list without numbers. By changing the “ul” tags to “ol” tags, you can turn this into a numbered list. Also note that “li” stands for “list item”. <li> tags can be used in both ordered and unordered lists. See an example of unordered (first) and ordered lists below:

Note that you can use the “list item” button to the right of the bulleted list button to insert a new item into an existing list.

Headings and Subheadings

One of the best ways to break up a continuous wall of text, especially on public websites, is with headings and subheadings. They make your content easier to scan for specific information, and search engines like Google use them to get a better idea of the content of your page and what search results to include it in. Headers are marked in HTML by h tags, such as <h1>, <h2>, <h3>, and so on. The lower the number in the h tag, the broader the content should be. For example, the <h1> tag should generally not be used in content as it is primarily used for the website or page title. <h2> can be used for the content title, and <h3> and above can be used for subheadings and sections within the text. Only the title of a section should be placed in h tags; the actual content should come below. Below is a brief visual guide to HTML header tags:

More Advanced HTML

If you’re comfortable going beyond the HTML features built into the editor, that’s great! The editor and renderer support most HTML features, including tables, embedded images, special characters, and nested elements. If you’re comfortable using these elements, it’s important to be sure the client wants them before including them in the order. Some clients appreciate the extra work while others prefer to do the formatting themselves to match their websites. Check instructions in detail and consider reaching out to the client via messaging before going too in-depth. Please note that our editor does not currently officially support CSS styling.

Getting Help with HTML

If you run into HTML errors when submitting your order, the checker will usually provide you a detailed note about where the error is. Common errors include incomplete URLs in hyperlinks, opening tags without a closing tag, and typos in the HTML Tags themselves. Keep in mind that the line number the checker provides counts line breaks (i.e. when you press enter) and not automatic line wrapping. You can paste the text into a text editor with line numbers like Geany or Notepad++ to make the fix easier. These text editors also provide HTML syntax highlighting and completion to help make your HTML work the first time.

When reaching out to Author Services for help, keep in mind that our support staff is not trained to handle HTML issues. As this is a widely documented standard language with lots of resources on the web, you should be able to find the answer to your question fairly quickly by Googling. Learning a little bit of HTML on your own can be very helpful in spotting errors as well.

For more information on understanding and writing your own HTML, check out W3Schools’ extensive tutorials located at https://www.w3schools.com/html/

If you have any questions, please feel free to email us at [email protected], or hop on our live chat feature when logged into your author account.

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

Register for Free!