A super easy guide to beginner-friendly, basic HTML codes and how to use them!

Basic HTML Codes:

<i> = italics

<b> = bold

<br> = line break 

<br><br> = paragraph break

<p> = paragraph/body text

<h1> = header text, the increase in number decreases the size of the header. In other words, h1 is the largest header, followed by h2, and so forth. 

To close or end a style, you write the same code used to initiate the style, but add a “/” before the letter(s) that indicate the style change. For example, <b>hello</b> will ensure that the word “hello” will become bold, and any following or surrounding words will remain unformatted. Make sure to place the ending HTML code before any following punctuation. Below is an example of how to use HTML coding to style a paragraph.

HTML coded version: 

I want to italicize <i>hello</i>. I want to bold <b>hello</b>. I want to both italicize and bold <i><b>hello</i></b>. I want to make a new line after this sentence.<br><b>I want</b> this <b>whole sentence to be bold except for the third word</b>. <i>I want this whole <b>sentence</b> to be italicized and for the fifth word to be bold as well</i>. 

Result: 

I want to italicize hello. I want to bold hello. I want to both italicize and bold hello. I want to make a new line after this sentence.

I want this whole sentence to be bold except for the third word. I want this whole sentence to be italicized and for the fifth word to be bold as well. 

As you can see in the preceding example, if you want to use more than one code to style the same word or section (as in: hello), the order of the codes doesn’t matter. If you want to build on a section that is already coded and add a style in addition to the existing one (as in the sentence: I want this whole sentence to be italicized and for the fifth word to be bold as well) you simply add the code to the word or section, you want changed. If you want to keep a word or section from being styled with the rest (as in: I want this whole sentence to be bold except the third word), the HTML coding must close before that section and then begin again after it. 

These codes can be extremely beneficial when type coding a document before dropping it into InDesign to be formatted and styled correctly. Using type coding creates efficiency in creating paragraph and character styles and makes it easy to search for the HTML codes to style text, rather than comparing it with the original document to catch everything. Adding tags for headings such as <h1> can also be very helpful in type coding to indicate heading sizes and formatting. 

Some sites also can’t read and process styled characters like italics and bolding, and require HTML coding for text so the copy shows up correctly. HTML coding is also often necessary and helpful in metadata tasks such as uploading copy to websites and databases so that the copy remains consistent throughout all platforms. 

Next time you’re changing the style of a word or phrase, try writing it with the HTML codes before using a shortcut or hitting the style button in the platform to familiarize yourself with the process. It may seem confusing at first, but it’s easy to use once you get familiar with the format!