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.
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!
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>
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
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>
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.
