Cookies

We use cookies to help us provide you with the best experience, improve and tailor our services, and carry out our marketing activities. For more information, including how to manage your cookie settings, see our privacy notice.

OK

Skip to content. | Skip to navigation

We’ve made our member-only resources free to everyone because of the current situation. We think it’s important people have the guidance they need to run their organisations during this time.

If you want to find out more about how you can volunteer to help deal with coronavirus, see our volunteering and coronavirus page.

If you are looking for advice on coronavirus and your charity, please see our dedicated coronavirus page.

Community-made content which you can improve Case study from our community

How to write basic HTML

Tweet Share on Facebook Share on Google+ Print
Suggest changes to this page

Knowing a little bit of HTML can be the difference between you controlling your website rather than the other way around! The good news is that it's easy to learn the basics.

HTML tags can transform plain text into a web page. They open <> and close </> around content. Note the slash in the closing tag.

Different tags mean different, specific, things and give a web page structure.
Knowing a little bit of HTML can help your website to look consistent and professional. It will also make your website:

  • easier to find using a search engine like Google (sometimes called search engine optimisation, or SEO for short) 
  • accessible to people using assistive technology (visually impaired people may use a screen reader to navigate your web page). 

Things you'll need

  • An editable website - most of these have a content editor which has an 'HTML' view. Together with the information in this guide, you can check and ‘clean’ the HTML.
  • It is possible to create web pages just using a basic text editor. Doing that from scratch is beyond the scope of this guide, but if that is something you’re interested in, read 'Further information' at the bottom of this page.
1

Learn what HTML tags are not

HTML tags are not...

For decoration

HTML tags may, coincidentally, change how text looks – subheadings look different from paragraphs.

However, they should not be used just to change how text looks – using a heading tag to make your name stand out would break the structure of your page.

Interactive

You can’t make a site which can remember things and do things using just HTML.

You need programming languages to make a web page interactive – but, if you become an HTML master, programming languages could be next on your list!

2

Learn the most common HTML tags

A single ‘master heading’ is used at the top of every web page.
Section headings and sub-section headings are used to split the page up.
Normal text is contained in paragraphs.

<h1>Master heading</h1>
<h2>Section heading</h2>
<p>A paragraph</p>
<h3>Sub-section heading</h3>

Special <strong> tags can be used to emphasise words in a paragraph:

<p>If you want people to highlight important words inside a paragraph, you can <strong>make them bold</strong></p>

3

Learn about tag "attributes"

Some opening tags have “attributes” inside them. Link tags, <a>, need attributes to work properly:

This paragraph has a link to Google.

<p>This paragraph has a <a href=”http://www.google.com” title=”Google home page”>link to Google</a></p>

  • The “href” attribute contains the destination of the link. 
  • The “title” attribute produces a little ‘pop-up’ message is a user holds their mouse over a link
4

Learn how to spot bad "attributes"

If you copy and paste content from Word, you may bring across style attributes into your website. These are bad. Copying and pasting into your website via a basic text editor like notepad is one way of avoiding this.

If you’re looking at your web page, and you see some text which looks weird, then check for a style attribute.

If you delete the style attribute (everything from style to the closing quotation mark) then it will probably make things look nice and tidy.

<p style=”font-family: comic-sans, impact”>This looks awful</p>

<p>This looks better!</p>

5

Start using proper tools

If you are going through a large amount of HTML to remove style attributes, it can get quite fiddly. There are tools to help with this.

Before editing

Copy and paste HTML via this “Tabifier” to make the dense structure easier to navigate.

Editing

Windows

Notepad ++ is a good free editor for PCs. Select 'Language' and 'HTML' from toolbar) to get helpful colours.

Mac

Text Wrangler is a good alternative for Mac users.

Online

CodePen is a good online editor. Click 'New pen'. Paste into the box labelled 'HTML'. 

Further information

There are lots of tutorial on the web about writing HTML. Some are very old, and they vary in quality, so be careful. HTML dog is one of the better ones.
Any book published after 2010, will probably be good enough. Head First HTML published by O’Reilly is very beginner-friendly. It also covers the styling language of the web, CSS.

Contributors

Page last edited Jul 25, 2017 — History

Help us to improve this page – give us feedback.