If you’re anything like me, I tried to avoid learning HTML (Hypertext Markup Language) code because I thought it was a bunch of complicated numbers and letters. I was overwhelmed just looking at code, let alone having to turn it into my job day in and day out. But hey, I started at the beginning and before I knew it, it became easier and easier. You CAN do this!
So let’s start off with a few basics…
You will see these tags (or commands) before and after a block of text. These tags tell the text what to do and how to look. These commands are always surrounded by brackets < >. To tell the text to stop doing a certain command you will put a forward slash at the beginning of the final bracket such as </__ >
- <b>Today</b> will bold the text Today.
- <em>Today</em> will emphasize (italics) the text Today.
- <center>Today</center> will center the text – Today – in your page.
You may want to know the code for underlining text to emphasize a point in your content, but I don’t recommend this. Use bold and italics only. The reason being that underlined text is a web standard for a link and you don’t want to confuse a visitor. When designing your website or writing content, you want there to be very little distractions (unless they are intended such as colored text for a headline). The more a visitor gets frustrated the faster they will leave your site.
Other common html tags:
<br/> — When you put this code at the end of a sentence or paragraph, it will create a break in the text.
- Usually at the end of a paragraph I will put 2 <br/><br/> to cause a separation between blocks of text, such as,
- This is my first paragraph. <br/><br/>This is my second paragraph.
- One break tag is good when you want to place text directly beneath existing text such as,
- address line 1 <br/>
city, state, zip code
- address line 1 <br/>
- If you are working inside of your blog, make sure you place these tags within the HTML tab of your content editor area. Update your page to see if you like your changes. If not, go back and add or delete a break tag <br/> and update your page to see if you like that amount of spacing better.
<h1> <h2> <h3> tags — This series of 3 tags represents your headline tags.
- <h1> represents your biggest size of headline text. Such as, <h1>Today</h1> becomes…
- <h2> represents your second biggest. Such as, <h2>Today</h2> becomes…
- <h3> is bigger than regular text, but the smallest of headline sizes. Such as, <h3>Today</h3> becomes…
When I was new and just starting out, I went to sites like, http://www.web-source.net/html_codes_chart.htm and added their site to my bookmarks. I found it was a handy reference tool to use when I had no idea how to do what I wanted to do when designing a webpage.
Luckily, there are so many tools available now to where you don’t have to be an HTML expert just to do some entry-level work on the web. Applications such as WordPress give you a basic content editor (that coverts your text to code for you) AND a html editor is you prefer to use that.
I have had MANY funny experiences with learning code. I remember it taking me well over a half hour to learn how to make a bulleted list the first time. But once I got it, I was shouting from the rooftops. I personally love a good challenge. Hopefully this will help you get a very basic, beginner understanding of code so you can experiment a little with it.