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:
- Item One
- Item Two
- 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.
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:
Hi everybody! | This is a table! |
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 >
Hi everybody! | This is a table! |
It's time for row two. | I used a bold tag within a 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.
Comments
378837 16. March 2014 - 2:12
Is there a word limit on the three writing samples?
382337 27. March 2014 - 22:45
I have added samples over 800 words, so I’d say if you keep them under 1000 words, it should be fine.
343181 7. April 2014 - 2:44
Thank you,
I finally was able to complete my profile.
401733 19. May 2014 - 18:48
I am interested in a tutorial to get me started. What places do you want me to research and how do you want my work submitted: example: Word Perfect, attached document?
391881 9. November 2014 - 5:33
The order information for product descriptions is often too vague. I am not sure what clients are looking for. For instance, currently there are multiple orders for optical lenses. Not a particular brand of lens, but a type of lens(I.e. Projection lens). Is the client looking for a review of the range of available products? An endorsement of a particular product? What?
if clients provided more detail about what they were looking for, perhaps these orders would fill more quickly.
2314741 5. December 2014 - 2:36
Very Helpful! Thank you for your great articles!
357333 16. December 2014 - 23:33
Thank you for writing this article. As a newcomer to this site, I found it helpful.
473229 13. February 2015 - 21:30
Thanks and good advice.
481109 19. February 2015 - 19:52
I've found on mutiple ocassions that the client's keyword combination makes the writing flow poorly or at least seem awkward. Take for example: "French country" in describing an architectural style. The correct term is "Country French" (when beginning a sentence) or "French provential." These are industry standard terms for architecture and interior design.
My question is this: When I see a request for a word string which might get more hits or flow better as verbage, should I question the client? Should I follow the instructions as written? I've turned down assignments because the keywords were not usable as wriiten and certainly not more than once.
589325 12. January 2016 - 0:38
I typed in a meta description tag just as shown here, but the editor would not accept it.
Benjamin Neglia 9. May 2020 - 23:34
Is the way to do a Meta description still valid? I’ve tried it and its not working on textbroker even though it works other places
TB Staff 11. May 2020 - 17:28
Hi Benjamin,
Please find more in-depth information on how to create a meta description in these two articles: <a href="https://www.textbroker.com/metadata" rel="noopener" target="_blank">Metadata</a>, <a href="https://www.textbroker.com/understanding-meta-descriptions" rel="noopener" target="_blank">Understanding Meta Descriptions</a>.
If you still have questions, please contact Author Services at <a href="mailto:a[email protected]">[email protected]</a>.
37804 14. January 2016 - 21:14
Great job, Stormgod. Four years later this post is still referenced and still the best advice for reaching L5.
282273 1. March 2016 - 3:03
Like a page-turner, SamBass' interview is scroll-moving with spirited tips, vivid imagery and a sense of urgency not to give up. And this, "If that doesn’t work, let it go. There will always be new clients, new orders and new opportunities," is so very true.
275225 27. April 2016 - 1:29
Thank you! This was a well-written and easily understood piece of information. Very helpful!
646591 22. June 2016 - 1:20
If you look at a briefing once, are you able to look at it again?
647669 1. July 2016 - 1:16
How am I supposed to level up if I never get work at level 2? Just doesn't make any sense. All the Jobs go to level 3 and 4.
38362 3. February 2017 - 15:00
Excellent refresher, Vikki. Nicely said.
687707 6. March 2017 - 16:41
I think that the growth of instagram has improved over the years and it is the only social network that has the highest growth so i think that people are on instagram more than they are on facebook and that makes a different because you knoe that facebook has nothing that makes people want to look at it for but everyone knows that instagram is like snapchat you can slide your screen and it will let you take pictures and videos like snapchat but it is also known for the famous social network site because most of everybody in the world goes to the page as has a page on there.
Anna2 6. July 2017 - 18:09
Is is possible to make a numbered list that runs throughout the article?
<ol>Item One</ol>
text text text
<ol>Item Two</ol> and so on.
Will that work or is that a disaster in the making?
Cody Christensen 27. July 2017 - 18:03
Thanks for your comment! For questions, please email our author services team at [email protected] and they will assist you.
Adriene 19. July 2017 - 22:55
I have attempted to make a table, but these directions aren’t working. I copied your directions line by line, but when I click "Review and Submit", it kept giving me error messages. I do hope someone is still checking this page on a regular basis. Thanks in advance for your help.
Cody Christensen 27. July 2017 - 18:02
Thanks for your comment! For questions, please email our author services team at [email protected] and they will assist you.
Adriene 4. September 2017 - 22:59
I have. They say they are not experts and cannot assist me any further. Where else can I find help?
Liza 16. April 2018 - 20:39
Hi, I have grasped the basics of HTML with my initial sample and I understand not to use it unless specifically requested but what is confusing me is how to format an order without using HTML?
For example; The only way to add headings, bold etc. when submitting text input is automatically in HTML and if I have already formatted it elsewhere it doesn’t transfer with copy/paste.
Free APK Full Version 19. June 2018 - 3:50
Hello would you mind letting me know which webhost you’re utilizing?
I’ve loaded your blog in 3 different internet browsers and I must say this blog loads
a lot quicker then most. Can you recommend a good hosting provider at a fair price?
Thanks, I appreciate it!
Melody 7. July 2018 - 23:04
This is a great article for beginners. Thank you so much for simplifying this information for your audience.
Phyllis Stewart 17. February 2019 - 0:23
For my large group of Direct Orders, I have frequent need for nested bullets. The Textbroker system will not accept the html codes. Do you have a suggestion? Need in a hurry.
corteznapue 8. March 2019 - 23:33
So sorry for the delay!
Please contact support at the appropriate email address if you still require assistance.
Clients: [email protected]
Authors: [email protected]
stella white 13. March 2019 - 12:33
While writing the article, I hi-lighted the words and clicked "bold" and "Italicize" and the HTML tags showed. When I printed out the article, the tags did not show, but the words hi-lighted were exactly as I intended.
Well, after reading this directive, I am thinking "just go back to bed".
Deepak 23. March 2019 - 22:11
Hoe to use h1 tag and italic together for heading..??
Toya 27. May 2019 - 18:59
Add the italic on the outside of the h1 tag:
<italic><h1>This is a test</h1></italic>
george 11. April 2019 - 13:09
Been using your services for several years. I have different qualities of writers needed.
Would it be possible to have a true 6 star rating (or writer award) to truly top people tried an trusted, and who appear in top publications?
corteznapue 12. April 2019 - 21:57
Thank you for the suggestion! That’s definitely something we’ll keep in mind for future improvements to our site.
Jolene 24. June 2019 - 17:09
Hello! Would you mind if I share your blog with my twitter group?
There’s a lot of folks that I think would really appreciate your content.
Please let me know. Many thanks
corteznapue 26. June 2019 - 19:31
Sure! Go right ahead. Thank you!
protect data 26. June 2019 - 11:05
Hey! I know this is kind of off topic but I was wondering
iff you knew where I could locate a captcha plugin for
my comment form? I’m using the same blog platform
as yourrs and I’m having trouble finding one? Thanks
a lot!
corteznapue 26. June 2019 - 19:30
Hi! Thanks for writing. Unfortunately I do not know where you can find one but I’m sure Google could help? Good luck!
talentcorp 8. July 2019 - 0:12
Thanks very interesting blog!
mary 27. July 2019 - 5:12
when starting ou how many sample rewrites do we get?
Norris Bacon 25. August 2019 - 19:12
How do you make something bold and italics at the same time or bold, italics and underlined. I don’t remember seeing instructions for that. Thank you.
Leo 15. September 2019 - 3:54
Hello Alex,
I must comment you on your article. I really enjoyed reading it and I got much needed information, which could be applied right away.
Additionally, your writing style is very concise, clear, engaging and easy to grasp.
Thank you much for sharing this with us.
Much appreciated.
Best,
Leo
Zakir at Web 21. September 2019 - 21:52
This post is great. I read your blog site pretty often,
and you’re constantly coming up with some good staff.
I shared this post on my Tumblr, and my followers
liked it. Good luck.
Anonymous 24. September 2019 - 5:15
Hello, I think your website might be having browser compatibility issues.
Ꮤhen I l᧐ok at youг blog іn Firefox, it looҝs fine bᥙt when opening in Internet Explorer,
it haѕ ѕome overlapping. I just wɑnted to give you а quick heads up!
Οther then that, vеry gⲟod blog!
TB Staff 1. October 2019 - 10:07
Hi! Thanks so much for taking the time to let us know about this issue. We’re glad to hear you’re enjoying our blog!
Kondrat Evdokimov 28. September 2019 - 22:17
There’s actually a lot to learn on this topic. I just like all the tips you provided.
John 12. December 2019 - 19:23
This article says to use <em> for italics and <strong> for bold. I am familiar with <i> and <b>. Are they interchangeable? Not that it’s a big deal but as I’m burning up the keyboard I’d like to know that previous knowledge carries over rather than having to worry about using the wrong command.
Just curious, <em> v <i> and <strong> v <b> – <i> and <b> seem much easier and intuitive.
TB Staff 17. December 2019 - 16:17
Hi John, Thank you for your question!
<i> stands for italics while <em> stands for emphasis. So, you should use <em> if you want to put more stress on a word or phrase and <i> if you just want to appear it in italics without stressing the word or phrase. The same applies to <b> and <strong>. <b> stands for bold and <strong> for strong importance.
Leah 6. January 2020 - 23:18
Hi!
Thank you so much. This is so helpful. Question is how do I combine the tags for H1 with italic to make the header Italic?
TB Staff 8. January 2020 - 9:05
Hi, thank you for your question! Try using this tool: https://wordtohtml.net/. It will allow you to format using "rich" text, and then convert it into HTML. You could also do it manually by adding an <em> tag alongside the <h1> tag. Just make sure the h1 tag is always on the outside. I hope this helps!
Shannon Barkey 18. February 2020 - 20:20
I appreciate this crash course so much. It was written 8 years ago and here I am, a newbie trying to get her foot in the door, and this information will help me tremendously. It’s time to write my first article to see where I am ranked as an author for textbroker!
Natonya 24. March 2020 - 9:24
I’m very impressed by the specific and descriptive information provided in this section of the guidelines for this type of work. It was so simple & it actually looks fun. I’ve always wondered about how writers do this. Thank you for the new knowledge guys.
mazal ashkenazi 27. April 2020 - 1:39
what percentage of your jobs require the HTLM codes ?
Can the author choose the subjects to write about ?
TB Staff 28. April 2020 - 9:05
Hi, thank you for your questions! The order topics are determined by the client, but the author chooses the orders that they would like to write. There is no percentage requirement of HTML, as each order’s requirements are different.
Jeanie 24. May 2020 - 9:33
Thank u so much. Very informative.
Mirriam 18. June 2020 - 0:30
Hi,
I have typed up my sample review using HTML however when I go to paste in on the sample page all tags disappear, what am I doing wrong?
TB Staff 23. June 2020 - 8:24
Hi Mirriam! Thank you for reaching out! One of our team members will be contacting you to gather more information on this issue.
April 9. September 2020 - 19:24
Seriously thank you so much because I was completely lost searching the web nonstop. Actually signed up a couple weeks ago but I was so intimidated by this but I actually accidentally overlooked the link on the textbroker website that led me to this page LOL. So I ended up searching all over the web to find all sorts of confusing instructions. So yes, thank you. I’ll let you know if I have any questions.
Jessica Kraintz 29. September 2020 - 21:33
Hello, I probably shouldn’t even be a writer since I’m completely lost on this html thing. Worth a shot though! Where am I supposed to be putting this text? Do I just type this on my Word document and hit enter? Thanks for all your help!
emmrich 5. October 2020 - 15:26
Hello Jessica,
many thanks for your comment on our blog.
Our Author Services team will be reaching out for further clarification. If you have any other questions, you can reach them at [email protected].
Your team from Textbroker