How To Technology

How to Use Basic HTML Tags

Source code of a website with pen

First of all, what in the world are HTML tags? Well, HTML stands for Hypertext Transfer Markup Language. Got it? I thought so. Basically, HTML are the commands that tell the structure and format of the text you are typing. Most of the time, you can use HTML and not even know it! When you are typing a document in Word or Pages, for example, and highlight text to bold or underline it, you don’t even see the HTML code for those formatting options. All you see is that your text has been bolded or underlined, right? But if you saved those documents as HTML files, you would see all the code that made your text look the way you wanted it to look.

Here’s an example:

How to Use Basic HTML Tags

This is bold and this is italics. 

The code looks like this:

<h2>How to Use Basic HTML Tags</h2>
<strong>This is bold</strong> and <em>this is italics. </em>

Some things to notice:

  • Every HTML tag begins with a less than sign – < – and ends with a greater than sign – >.
  •  Each tag is closed by placing a forward slash after the the less than sign: </
  • The text you want to format goes in between the opening tag <> and the closing tag </>
  • The h2 tag tells you the text is a header 2 size and is bold.
  • To bold text, use the strong tag: <strong>BOLD</strong>
  • To use italics, use the em tag: <em>italics</em> (The “em” may seem weird – why is it not “it” for italics? “Em” stands for emphasis.

It is nice to know the most common HTML tags, because it helps you make nice looking web pages. Sometimes you want things formatted a certain way and no matter what you do, the text just doesn’t look they way you want! When this happens, it helps to be able to go in and format it yourself. Here’s a list of them 10 most common tags:

  • <h1> - <h6>Heading
  • <p>Paragraph
  • <i>Italic
  • <b>Bold
  • <a>Anchor
  • <ul> & <li>Unordered List & List Item
  • <blockquote>Blockquote
  • <hr  />Horizontal Rule
  • <img>Image
  • <div>Division

Heading Tag:

Formats text for headings. Sizes are the following:

  • heading 1

  • heading 2

  • heading 3

  • heading 4

  • heading 5
  • heading 6

Paragraph Tag:

Starts a new paragraph

Italic and Bold Tags:

We’ve discussed these above, but notice how I bolded and italicized these words. You can use multiple tags together. To do this, the code looks like this:

<em><strong>Italic</strong></em>

Make sure you close each tag!

Anchor Tags:

Anchor tags are for linking to webpages. Each link starts with the <a tag and is followed by the web page URL you are linking to. Like this:
Ponder Monster  is linked to the site by this code -
<a href=”http://www.pondermonster.com/>Ponder Monster </a>

List Tags:

To make a list, you need two tags. The <ul tag or “Unordered List” tag groups all our list items together in a single list. The <li tag lists the items on separate lines.

  • Hawaii
  • Fiji
  • Aruba

The code looks like:

<ul>
<li>Hawaii</li>
<li>Fiji</li>
<li>Aruba</li>
</ul>

Blockquote Tag:

Why do you need to use quotes? Sometimes in an article, you may have to quote someone else, reference someone’s writing, use customer reviews or include a quote you love.

“The best way to cheer yourself up is to try to cheer somebody else up.”
Mark Twain

<blockquote>”The best way to cheer yourself up is to try to cheer somebody else up.”
Mark Twain</blockquote>

Horizontal Rule:

This creates a line a line across the page and breaks up your web content. This tag does NOT have an opening and closing.


<hr />

Image Tag:

Like the horizontal rule tag, this tag does NOT have a separate closing tag. It will also have a source for the image.

photo 4

 

<img src=”http://www.pondermonster.com/wp-content/uploads/2015/02/photo-4.jpg” />

The source for this photo is on the Ponder Monster media library, so it is pointing to the file on the database that I chose to insert.

Division Tags:

You can create a division on your page to divide the content into sections. By default, browsers always place a line break before and after the <div>. This helps when you are formatting a large chunk of text.

A div tag can do this.
It’s just to further divide content.

The code looks like this:

<div id=”myDiv” style=”font-family: Helvetica; font-size: 12pt; border: 1px solid black;” title=”Example Div Element”>A div tag can do this.
It’s just to further divide content.</div>

Don’t be nervous…this is not as hard as it seems! It’s just saying to use the font Helvetica and make it a 12 pt size font and to put a small black border around it. Not to complicated once you pick it apart!

You can start a free wordpress blog and play around with these tags. Get familiar with them and you’ll be ahead of the game!

Want to learn more cool stuff? Sign up!

Leave a Comment

%d bloggers like this: