ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Quick HTML Help For Newbies

Updated on September 28, 2014

A basic reference guide to the most commonly used formatting codes when writing online

This quick HTML tutorial covers all the basics - bold, italics, links, paragraph alignment, as well as a few extras (such as the numeric code for the pound sign!). Basically, I wrote it based on all the code I can actually remember readily, use often and expect to see on a webpage.

Anything else - from colour text to borders - may look pretty but is usually just a fancy extra. The code on this page is what I consider the functional basics. You know, the stuff you use all the time when typing something in Microsoft Word!

I know there are several good HTML and CSS guides on Hubpages already, but this is designed as a quick basic guide for my mother, of all the codes she actually wants to use.

All a bit beyond you? There's always this Rich Text editor, from the marvellous GreekGeek - just write, bold, link away, and copy the code at the end back over to your website! And remember, there's probably a module that can do it for you if you're using something like Hubpages.

Need to talk to someone, get further help or explain a complicated situation? Leave me a comment or drop into the forums where there are more people who'll happily help, and more ways to demonstrate stuff to you! (And check out my The Stupid Question Project!)

Code Quicklist

If you know what you want, just copy the code below!

Basic text changes
<b> </b> or <strong> </strong>
<i> </i> or <em> </em>
<u> </u>

<a href=""> </a>

Paragraph alignment
<p align=center> </p>
<p align=right> </p>
<p align=justify> </p>

Other formatting
<br> </br>
<ul> </ul>
<span style="text-decoration: line-through"> </span>

<li> </li>
<ol> </ol>
<ul> </ul>

Pound Sign £

<img src="" >
<p style="float:right">
<p style="float:left">

Other formatting


Pound Sign £








What is HTML?

How to use HTML on a page

There are several different 'code languages' that have developed over the history of computers and the internet. Two that are still widely in use (and can be read by most browsers) are:

  • HTML - HyperText Markup Language
  • CSS - Cascading Styles Sheets

If you are using a are 'raw' code editor, then you have to type in (or copy and paste) the HTML for any special effects you want to add (e.g. bolding, font, bullet points, colour). The other kind of editor is called a WYSIWYG (What You See Is What You Get) editor. You can usually switch between the two options on many sites.

The code you add goes around the text you want it to affect. The < and > symbols tell the website that it is code, and not to appear as visible text. So to bold or link a word, you would write it in this order:

< code for bold/link/other effect >Word you want to format</closing tag>

Usually all the information goes into the first bit of code, and it can get very long and complicated!

The closing tag is usually only one letter long (whichever letter starts off the opening code). If you forget to close it, the website will assume it continues until the end of the module or section or page. In theory, if you have multiple code effects, you should close them in the same order you opened them (e.g. if you bold and italicise a word), but in practice it often makes no difference.

Sometimes there is more than one way to do the same thing (for example, using CSS instead of HTML) - it doesn't usually matter which you use, so pick whichever you remember best. CSS is a bit more complicated and is often used to affect entire pages or blocks of text.

If you have a blog (e.g. Blogger or Livejournal), you can type, bold and link in the WYSIWYG view, then switch to the HTML view to see and copy the code. If you want to type it straight into a Hubpages module, you'll need to know a bit more though. And be careful - not all code works on a Hubpages page, so some may simply disappear.

Bold, Underline, Italic

The most basic text formatting options

Bold or 'strong' emphasis: <b>bold</b> or <strong>strong</strong>

Italics or emphasis: <i>italics</i> or <em>emphasis</em>

Underline: <u>Underline</u>

Building HTML Links

How to create hyperlinks in your text

If you want to create a text link it will not become a link unless you either add it to a link module (e.g. Link List, Links Plexo) or use HTML.

  • The opening code for a link is: <a href="Http:// goes here!">
  • The closing code is </a>
  • And the words you want to use as the link go inside both.

For example: <a href="">An awesome page about Gaudi</a> becomes An awesome page about Gaudi

Always include the http:// or it may try and redirect within the website you are on. If it is another page on the same site, you can often drop the domain part of the link (the '' part) and just use the last bit. (e.g. /hub/antoni-gaudi-2)

The link code can go around anything that you want to become a link - including an image code. Simply replace the words you want to appear with the image code.

If you want to add various special attributes to HTML they are separated using "quote marks" inside the span tags (the <>). Most of the time, you will never need to add anything else to a link, but always make sure the quote marks are in the right places.

Common extras include "rel=no_follow" and "target=blank"

These could be added like this: <a href="URL" "target=blank" "rel=no_follow" >

  • "rel=no_follow" is recommended for paid links, to tell Google this is a paid and not a 'genuine' recommendation.
  • The target attribute tells the new page where to appear. "target=blank" is used to force a link to open in a new browser window. Use sparingly, as most visitors will be annoyed by this.

Aligning Paragraphs

Left, right, centred and justified.

If you want to centre your text or align it to left or right, you can do that using the <p> or paragraph attribute. Obviously, the text is already automatically aligned on the left, so you don't need that. And just remember to use American spelling for 'center'!

Like the links, you use the quote marks to separate the different effects - but unlike links, a lot of website editors will add them in automatically, so I never bother to type them if I know that the website will fix it for me.

  • To center paragraphs, add <p align=center> (or <p align="center">!)beforehand, and </p> when you want it to stop.
  • And to align them on theleft, just replace the ‘center’ with the word ‘right’: add <p align="right">
  • You can also justify the text (spread it out evenly) with <p align="justify"> but this may have either no visible effect or be hard to read. Using ‘justify’ depends on the spacing of the paragraph and your personal preference.

CSS alternatives: The CSS to align paragraphs right is <p style="text-align:right"> and you can also ‘float’ entire blocks of text and images to one side or the other of normal text using <p style="float:right">. (Again, replace ‘right’ with left, center or justify, as required).

Indenting Paragraphs

Move the text further in from the left

If you want to add a quote, or just indent the text for visual purposes, you can indent it using:

<ul> (not supported on Hubpages)

    • This line is indented.
      • And this line is indented again!
        • In fact, you can just keep adding <ul>s!
        • If you want it to stop indenting and keep typing, you will need to
          • close each <ul> tag with </ul>.


  • The <ul> adds a line break after itself, so there will be more space before the following text than you may realise.

Bulletpoints and Numbered Lists

How to create lists automatically

If you want to create a bulletpoint list you have a few different options, depending on what you want.

But the most basic code is:

<li> </li>

You don’t even have to have the closing </li> in between each point, as it will automatically close each time it encounters a new <li> (but you’ll need to close the last point if you’ve written anything afterwards!). Squidoo automatically creates a new line before each <li> so you can fiddle with the spacing. If you add line breaks in the code and closing tags

  • <li>Each</li>

  • <li>point</li>

  • <li>will</li>

  • <li>be</li>

  • <li>widely</li>

  • <li>spaced.</li>

Compared to either

  • <li>leaving
  • <li>out the
  • <li>closing tag</li>

    (or typing the <li>code</li> <li>and</li> <li>points</li> in one long line

– same result as leaving out the closing tag above).

If you want to change how the list itself looks….
You add one or two other pieces of code before the first <li> and after the last </li>.
<ol> </ol> – ordered list
<ul> </ul> – unordered list

<ol> </ol> used on its own around your <li> points turns the bullet points into numbers.

  1. like
  2. this
  3. as
  4. many
  5. points
  6. as
  7. you
  8. want

While <ul> </ul> creates an indent (if you don’t like how close the list is to the left hand side). You can also use the <ul> for normal text.

So <ul><li> point 1</li><li> point 2</li></ul> will look like:

  • point 1
  • point 2

If you want to get fancy, you can combine <ol> and <ul>. The order you use them in matters.
If <ul> goes first, everything is indented a bit futher towards the middle.
<ul><ol><li> point 1</li><li> point 2</li></ol></ul> will look like:

  1. point 1
  2. point 2

Whereas if <ol> goes first, it actually changes the bullet points as well as indenting even further.
So <ol> <ul><li> point 1</li><li> point 2</li></ul></ol> will look like:

  • point 1
  • point 2

Line Breaks

Go down a line after your text.

Sometimes websites just won't pay attention in certain modules when you try and tell it




Or you want to be able to add a certain number of line breaks, without having to scroll past blank space while typing. Easy. Just add a line break in the code: <br>

You don’t even have to close it. Just add a <br> every time you want to go down a line.


Put a line through your text.

Want to strike out your text?

<s> </s>

Unfortunately, the basic HTML option doesn't work on every site. This longer version may work instead:

<span style="text-decoration: line-through"> </span>

The Pound Sign

Getting symbols to appear

Unicode symbols are associated with a certain number, for example, the pound sign is 0163. There are a couple of different ways to type the pound sign £ (and other symbols, which will use different numbers).

  • To type the pound sign, press and hold the Alt key while typing 0163 on the numeric keypad at the right of the keyboard (This doesn’t work if you use the row of numbers along the top).
  • Alternatively, use &#163; and it should become £

Headings and Sub-headings

Header tags decide how large the text will be!

If you want to add different sizes of text for headings and subheadings, you would use header tags in ascending order. Blogposts and Hubs already use <h1> and <h2> for the title and subtitles or module titles.

Elsewhere on the web, you can use <h1> through to <h6> (largest to smallest).

Basic Image Sizing and Alignment

How to change image size and location

If you are linking to an image from elsewhere - for example, a Zazzle or Amazon image, or on a storage site such as Photobucket or Flickr, then this is called hotlinking. It's fine if you link to a site that's built for that - such as the above examples - but is bad if you do it to someone else's personal site because they have to pay for the bandwidth, and they control the image (see this page about hotlinking).

Hotlinking gives you a lot more flexibility and control. Even sites that let you upload an image use hotlinking by linking to where it is stored on the website to display it, with code that you can't see.

I cannot demonstrate the following examples, because Hubpages does not allow you to use img tags (all images must be uploaded in their Photo modules).

You will need the image source code. You will get this either from the code provided by the image hosting site, or by right clicking on the image and copying the image location/image URL. This is not the same as the page URL.

  • <img src="">
      • - Image (code), image source.

    • Similar to a text link, you add the image link in between the quote marks (don’t forget them – they’re important!)

Unlike most HTML, you don't need to close the image code.

But what if you want the picture in the middle?

Easy, just use the paragraph alignment code around the image code.

<p align="center"><img src=""></p>

You can do the same think with the link code, or any other examples. But what if you have a block of text and want it to sit next to the picture?

Easy! Just add align="right" (or left) inside the image code.

And what if you want to include a caption under the image?

Well, then you can use the <p style="float:right"> (or left) CSS code, which will include any text after the picture until you close it with </p>.

  • You may have to break up the text so that it sits neatly otherwise long sentences may push the ‘floating’ section out too far into the main text.
  • Experiment with putting the image code at the beginning of different sentences to change how high or low it sits.

Changing size is easy – just add another attribute into the image code: width="100″
(You can also uses height="xxx" instead, but many websites calculate the size automatically so I only bother to use one. And width is slightly easier to work with.

If you use both at once, make sure you get the proportions right as the image will be skewed to match whatever numbers you use!).

  • So you can put two or more small images next to each other…

    Code: <img src="image URL" width=”100″> <img src="image URL" width=”100″> … etcetera!

Alternate and Title Text

The last couple of attributes are optional, but often useful extras.

  • alt="alternate text" allows you to describe a picture for search engines, which helps with traffic. This is also what appears if an image can’t load, or is read out by text to speech programs.
  • title="title text" works similarly, except that the words you write here appear in a pop-up caption when you put your mouse over a picture.

Like align and width, alt and title are added in the image code. You can use as many as you like, in any order – as long as you remember all the quote marks!

For example:

<img src="image URL" width="150″ alt="a picture of a purple cat" title="Purple cat says meow!" align="right" >

…and to link it, you can add the link HTML at the front
<a href="URL"><img src="…etcetera ></a>

Quote Mark Warning

If you copy or write code into Word, it may use quote marks that are not compatible with HTML code. See the difference between " and ” ? The second one will not work.


    0 of 8192 characters used
    Post Comment

    • ixodoi profile image


      5 years ago

      Thanks I was searching for some of those things for a while now.

    • Vera-S profile image


      5 years ago

      Great lens. Thank you for creating this very helpful lens.

    • profile image


      5 years ago

      @FlynntheCat1: You're right!My content is back to where it was,but the update for the workshop so far isn't as good as it was.I use to be able to view the whole page on my smart phone,but right now I can't see or get to certain things.

    • FlynntheCat1 profile imageAUTHOR


      5 years ago

      @tonymic85: Squidoo has been updating the Workshop view - that's probably the problem. You probably need to submit a bug report (or just wait and hope it gets fixed)

    • profile image


      5 years ago

      Strangely enough my workshop page to my lens was rearranged,then today is just shut down only showing a mall piece of the workshop page.Anybody know or experienced this ?

    • kmhrsn profile image


      5 years ago

      Great lens, just what I was looking for. And your mom's lenses are great too! :-)

    • profile image


      5 years ago

      @JeffGilbert: Thanks!I will be updating from time to time,so stay tuned!

    • JeffGilbert profile image


      5 years ago

      Great resource, thanks for making this page, very helpful... :)

    • flinnie lm profile image

      Gloria Freeman 

      5 years ago from Alabama USA

      Hi this is all so new to me, thanks for sharing. I will keep on reading your lens, maybe something will click for me.

    • FlynntheCat1 profile imageAUTHOR


      5 years ago

      @tonymic85: So the link to the page it is on is what people would click through to. So... is the page a picture is on. is the actual image link

      Image links would usually end in .jpg (JPEG image file type; other common kinds are .png and .gif)

      So you'd end up with &amp;lt:a href="

      Sometimes the picture itself is going to be too big for your page, or you want it to go somewhere particular with text wrapping around it; that's when you'll need to add more code into it. But this is a basic clickable image.

      If you want to just copy from Flickr, go to Share (over the image) and expand the "Grab the HTML/BBCode" option. (HTML is the default, so you shouldn't have to worry about this. But if you see square [ ] brackets, that's BBcode, which is for forums, not Squidoo).

      Then choose a size from the drop down menu (this is based on what it currently looks like, but it can change). 500 is large, nearly the full size of a Squidoo text area.

      Simply copy that code it gives you, paste into a text module, save, and have a look at it to see if it's what you want. It has some extra stuff in it - a "title" and alt (alternate) text which is text that shows up when hovering over the image/description for blind people, as well as the size limits.

    • profile image


      5 years ago

      If someone could please show me an extremely simple example of a photo url.I'm trying to post a photo on my lens of a picture I have downloaded through the html code or what have you.I tried getting the photo through Flickr but I don't understand what that is Flickr is giving me.If someone could show me just a super extremely simple example of what one look exactly like when you post it on to your lens it would be incredibly appreciated.

    • madeinamericasc1 profile image


      5 years ago

      ahhh, thank you for this. So simple, but I did not realize Squidoo allowed HTML in the TEXT blocks, seems so obvious. Again, thanks for posting this.

    • FlynntheCat1 profile imageAUTHOR


      5 years ago

      @MBurgess: Don't worry about them on Squidoo - basically, every module title and subtitle is already an automatic header tag. You can use them in text just to make words bold, but it won't make a difference to Google. Use the titles and subtitles of modules and you'll be fine.

    • MBurgess profile image

      Maria Burgess 

      5 years ago from Las Vegas, Nevada

      Thanks, Flynn! I wanted to find out how to add my image credits neatly. Everything here is very helpful! However, I am still in the dark when it comes to the H1 and other "H" tags. I want Google smilies!

    • FlynntheCat1 profile imageAUTHOR


      5 years ago

      @FlynntheCat1: sorry, - getting the HTML to show up is a little tricky!

      But I used it right after 'you would do' and it just dropped to the next line for everything after it. Obviously you'd want to use it at the END of sentences most of the time :D

      Like ( goeshere) this!

    • FlynntheCat1 profile imageAUTHOR


      5 years ago

      @tonymic85: Are you just typing normal words without code in? Because you shouldn't need code at all to separate out paragraphs on Squidoo. You should just be able to type, hit Enter whenever you want to go down a line or two, and save. If that's not showing properly, something's weird.

      To add code into it, just to see what happens, you would do this where you just type until the end of the sentence then type in

    • profile image


      5 years ago

      I'm a newbie flynn!It would really help if you could print the code exactly the way it should look and i will just duplicate it.I don't know why this is so complicated.I see almost everybody breaking up paragraphs on their lens,but some how I can't.

    • FlynntheCat1 profile imageAUTHOR


      5 years ago

      @FlynntheCat1: Okay, it ate the code! I'll just try again:

      If you're just typing normal text, you shouldn't need actual code in a Squidoo module, it does it automatically when you hit Enter.

      But if you're having problems...


      If you want a bit more space, use

      If some code is messing things up somehow, use

    • profile image


      5 years ago

      @favored: Do anyone know how to break or separate paragraphs?I've tried everything and for some reason the codes they put up everywhere don't work for me.

    • MichaelJoeNess profile image


      5 years ago

      My new favorite lens!

    • Niagara Ghosts profile image

      Niagara Ghosts 

      5 years ago

      Wow! Did I ever learn a bunch!! Thanks for taking the time to so thoroughly explain that which was previously about as understandable as Latin. With your great advice, I just may be able to 'get this' html thing. Awesome Lens:-)

    • greencurator profile image


      6 years ago

      Thanks a lot. You don't have any idea how you have helped me with my project.

    • AstroGremlin profile image


      6 years ago

      Terrific lens for lensmasters. Was looking for a quick and easy way to bold text. Looks as though I need to use HTML code, but good to know. Really good to learn how to center a photo.

    • IgnitionGolfer profile image


      6 years ago

      Thanks for the code, I appreciate the help.


    • cgbroome profile image


      6 years ago

      Another great lessons lens to bookmark. Thanks for the help!

    • BowWowBear profile image


      6 years ago

      Great GREAT lens Flynn! You present your thoughts clearly, illustratively and concisely! Thanks so much for a very helpful lens. I look forward to looking at more.

    • Wednesday-Elf profile image


      6 years ago from Savannah, Georgia

      Very, very basic HTML is what I have been working with here on Squidoo. I have been wanting (and needing) to learn more HTML and this page is a great place to begin. I have bookmarked it for future reference, particularly for some of the links you have included here. Just by reading this, I have learned several things I did not already know. Thanks much.

    • Aquavel profile image


      6 years ago

      Excellent lens filled with info and examples. Thanks for the CSS alternatives too!

    • FallenAngel 483 profile image

      FallenAngel 483 

      6 years ago

      Thank you this is really helpful and well explained information. I understand everything except how to make a block of images with links all neatly alligned together. HTML isn't easy but I think it is worth learning.

    • marlies vaz nunes profile image

      Marlies Vaz Nunes 

      6 years ago from Amsterdam, the Netherlands

      Very useful! Thanks for sharing.

    • profile image


      6 years ago

      Very helpful lens. Thank you for sharing.

    • profile image


      6 years ago

      Just started to create lenses, these tips are worthwhile . thanks

    • mary lighthouse15 profile image

      mary lighthouse15 

      6 years ago

      I found this very helpful. Thanks for sharing!

    • favored profile image

      Fay Favored 

      6 years ago from USA

      Added this to my Helps lens. Thank you, especially for the code list.

    • profile image


      6 years ago

      Clear and simple tutorial. I have found what I needed, Thanks for sharing.

    • profile image


      6 years ago

      Hi Flynn, this article is really awesome, thanks for sharing, now I will have to bookmark your page for future reference whenever I need help on html etc.

    • hysongdesigns profile image


      7 years ago

      oooh I just discovered this one! Now I will admit my eyes were rolling up in my head by the end of it but that is not your fault. That is my reaction to most coding instructions. But I'm getting better, I can go longer before it happens now. In the mean time I want to say THANK YOU for all of the things you do here on Squidoo and SquidU to help us all out. I have learned a lot from you (and sooomany others too) and I really appreciate you help and comments on SquidU. So this is my Thanks Giving comment ;-)

    • jethrosas profile image


      7 years ago from Philippines

      I easily learned your tutorials. It means you made it great! Cheers! :)

    • profile image


      7 years ago

      Thank you so much for all the helpful tips. It helped me creating my new lens.

    • Poison kitty profile image

      Poison kitty 

      7 years ago

      Great Lens! Beleive it or not, it took me forever to find te justify code, nobody ever has that on their tutorial lenses!


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)