No matter what CMS (Content Management System) you use, basic know-how when it comes to HTML is always handy. The ability to read code helps you distill complex information quickly – and often, knowing how to write code enables you to problem solve small issues related to how your content is presented on screen.
What is HTML anyway?
HTML stands for Hyper Text Markup Language. It is written in the form of codes comprising tags enclosed in angled brackets like this: <html> (open) </html> (close). These codes string together to form the language used to create HTML files (or in other words, web pages)
Learning HTML starts with understanding both essential and basic tags.
There are 4 essential tags that form the structure of an HTML file:
- The html identifies the beginning and end of the html document.
- The header contains information about content on the page like author or meta tags (this does not appear on the actual page that public audiences see).
- The title defines the short text that will appear in your web browser bar.
- The body contains all content or information that will appear on the page.
Here is the structure in which essential tags are used:
|
<html> <head> <title>this is where the title goes</title> </head> <body> this is where the content goes (lots of stuff goes in here) </body> </html> |
Headings tags distinguish headings and subheadings from the rest of the content on a web page (<h1> </h1>).There are several basic tags used to customise content on your website. They are located between the <body> and </body> tags. The most common examples are listed below.
- Paragraph tags compose sentences to appear as paragraphs (<p> </p>).
- Link tags redirect a viewer to another page once this link is clicked (<a href=”url of a website”> text </a>).
- Image tags enable you to add photos to your web page (<img src=”photo.jpg”>).
There are also basic tags that enable you to format the text on your web page:
- Bold tags format the text you want to emphasize (<b> </b>).
- Italics tags display letters in italics (<i> </i>).
- Underline tags underline the text between the tags (<u> </u>).
- Bullet list tags enable you to create bulleted lists for your text (<ul> <li>text</li></ul>).
The text below shows how essential tags and basic tags work together:
| <html><head> <title>this is where the title goes</title></head>
<body> <h1>this is where the page heading goes</h1> <p>this is the <b>first paragraph</b> of text </b></p> <p>this is the <i>second paragraph</i> of text</p> <p>this is the <u>third paragraph</u> of text</p> <ul> <li>bullet list 1</li> <li> bullet list 2</li> <li> bullet list 3</li> </ul> <p>this is where I want to put an image: <img src=”photo.jpg”> </p> <p>this is where I want to put a link <a href=” http://avioncommunications.com.au/ “> Avion Communications</a></p> </body> </html> |
Your code above will look like this as a final product:
This is just a brief introduction of HTML. There are other tags you can use to customise content on your web pages.
If you want to enhance your HTML skills, there are some free interactive resources on the web such as html.net, khanacademy.org or w3schools.com. Happy coding!
