Thanks to free website builders no one really needs to mess with coding HTML anymore. However, on occasion HTML tags can come in handy, for example to make quick changes to a website, add hypertext in a comment, or format text for a forum post. In this article I want to show you a few, possibly random, but definitely useful and simple tags for daily use.
Before we start, let me introduce you to some basic rules that will hopefully make HTML tags easier to understand:
- HTML uses markup tags, which are enclosed in angle brackets, such as this: <html>
- Tags that look like the one in the example above are called start tags. Every start tag must be followed by an end tag at some point, such as this: </html>
- Some tags do not describe content. To be compliant with current standards, however, they must still end. Consequently, they unite the start and end tag, such as this: <br />
HTML tags are usually straightforward. The tags for making text bold, italic, or underlined are derived from the respective word.
Input: <s>strike through text</s>
strike through text
Plain URLs can look pretty ugly. Adding the hyperlink to a text, i.e. creating a hypertext, is much more stylish and will save space, especially if the link is very long.
Input: <a href=”http://www.makeuseof.com” title=”MakeUseOf”>MakeUseOf</a>
As you can see this HTML tag is a little more complicated, so let’s look at it in detail. The actual tag is <a> and the additional elements are attributes that specify further characteristics. The attribute href= specifies the link and title= defines the mouse-over tooltip. Be sure to use quotations marks to enclose the link and the title, otherwise you might end up with a broken link.
A picture can say more than a thousand words. We should use them more often. And this is how you can manually insert one using HTML:
Input: <img src=”http://www.yourlinkhere.com/Smiley.png” alt=”smiley” />
Let’s also analyze this tag. Again, the actual tag is <img> and the required attributes are src= and alt=. The former points to the location of the image, i.e. its URL, and the latter provides an alternative text, which is displayed in case the display of images is blocked or the link is broken. Again, use quotation marks to avoid broken links.
The <img> tag is also an example of a tag that doesn’t need to be ‘ended’ and hence closes with the forward dash in the initial tag, i.e. <img /> rather than <img>.
Breaks & Paragraphs
To create a structured text, you need to utilize line breaks and paragraphs. And these are the tags you need to know:
Input: <br />
Output: This tag creates a line break. Note that this is another tag that unites start and end tag in one.
Input: <p>Text inside your paragraph.</p>
Output: Unlike the previous tag, the paragraph tag has a standard start and end tag. The text in between the two tags is wrapped into a paragraph, meaning there is an empty line before and after.
There are essentially two types of lists: ordered and unordered lists, better known as numbered and bulleted lists. To create either, you need to know two different tags, but only three in total. Let’s look at the examples first:
- Item One
- Item Two
- Item One
- Item Two
To create an ordered list, use the tag <ol> and for an unordered list, insert the <ul> tag. In both cases, the <li> tag is used to define an item within the list.
Now that you have seen how simple and logic HTML is, you may want to go beyond the very basics and learn a little more. For more HTML tips, check out these articles:
- 5 Steps To Understanding Basic HTML Code
- 5 HTML Tips to Create a Fast Loading Free Website
- 7 Cool HTML Effects That Anyone Can Add To Their Website
Do you feel a little more confident about using HTML tags now? If you have been ‘hand coding’ routinely before, what tags do you think are missing?
Image credits: kentoh