Basic HTML That Everyone Should Know

Better Website

When starting with website development and design the first thing taught is basic HTML. Things like centering, bold, paragraphs come in handy when hand coding a styled website.

With the advent of the visual editor, anyone can now do styling on their websites. While I'm not saying this is a bad thing if you want to DIY your website you need to know the basics of HTML to make the easy fixes.

Start your coding knowledge at the beginning

Before we begin, do note that you need to be in the HTML window (also known as the text tab for you WordPress users) for these to work.

You also need to understand opening and closing tags. The opening starts the sequence, and the close (it had the forward slash) closes it. Here's what it looks like

basic html begins with opening and closing tags

Line break – <br />

Whenever you use this element, anything after it starts on a new line. Notice the space before the forward slash, this is important because older browsers may have trouble without it.

Nonbreaking space –  

Also known as a hard space, is a character that allows for spaces. In HTML is you write five spaces in your test, your browsers will remove 4 of them. To use, insert this code into your post or page where you want the space to appear. For double spacing, rinse and repeat.

The most basic HTML begins with some text styling to use for the skimmers and scanners of your website and articles.

<b>Bolding</b> or <strong>Strong</strong>

Despite what some say the <b> element is still relevant and should be used to put emphasis on text without conveying importance. The importance part is the key to <strong>. If you want to set the word apart for emphasis, use the <b> tag however if you want the word(s) to have relevance, like calling out a keyword use the <strong> tag.

<i>Italics</i> or <em>Emphasis</em>

Same rules apply to italics as bold but with different elements. To call attention to a word or words us the <i> tag. If you want to call attention and put some importance on them, use the <em> tag.

<strike>Strikethrough</strike>

We do love our strikethrough text when we're showing differences or old items. Striking comes in handy when you're trying to show a priced item that is now on sale. This element will display a thin line through your text.

<big>Larger</big> or <small>Smaller<small>

These elements are for font sizing. Want something to appear one size larger use the big tag. Same goes for smaller text only use the small tag. I like to use small for noting something like the “we won't sell” text in my opt-in.

<h1>Headings</h1> through <h6>Sub-Headings</h6>

Headings indicate the six levels of document sections with <h1> being the most important. A few things you should know about headings:

  • Don't use bold or italics with them. You can style the tags with CSS and classes.
  • Avoid skipping levels – start with <h1>, next use <h2>.
  • Each page should only have one <h1> heading.
  • Heading should not be used to style text, use them for presenting organization on the page.

<p>Paragraph</p>

The <p> tag represents a paragraph of text and comes in handy when using the text widget of your sidebar. The paragraph element often is used to style text using classes and attributes.

<center>Centering</center>

There comes a time when you will need to center an image or even YouTube video. By wrapping the code in the center element, your browser will automatically put the item in the center of the page or text area.

I've saved the best for last because basic HTML is more than making words stand out…

<a href=”yourlink.com”>Links</a>

This is one of the most important basic elements you need to know – linking your text. Let's break it down first: the a is the element that tells the web you have a link which is why the closing tag is only the a. The ref part tells the web gremlins where you want to go, similar to a street name. One more important piece of information is that you need those quotes (plain only) around the URL.

Note: if you want the link to open in another window you need to add one small piece to it, the target attribute. It will look like this <a href=”yourlink.com” target=”_blank”></a>

Image <img src=”yoururl.png” />

Similar to the link, the element is img, which tells Google you have an image to display. The src part is the path of the image and tells the web gods where to find your image.

There are several attributes that can be used with images including width and height, title, alt, and styles.

The alt attribute is important if the picture cannot be displayed. It provides alternative text in place of the image. It's also good for SEO reasons too.

<img src=”greatimage.jpg” alt=”This would display instead” />

Now you if you want to make your image clickable you need to add the link tag to it. It's very simple as you wrap one with the other. Be sure to put the link tag around the image tag and make sure to close it.

<a href=”yourlink.com”><img src=”greatimage.jpg” alt=”This would display instead” /></a>

There you have it, some basic HTML to get you started with your website or blog. Whether you're going the DIY route or hiring a tech team member, it's important that you know the basics.

Have some questions about using basic code or don't understand where to put them, let me know in the comments. You can also schedule a chat to discuss your website and blogging needs.

8 thoughts on “Basic HTML That Everyone Should Know”

  1. Oh, thank you! This is so helpful. I always get so confused when I have to add an html code into my site by myself. I’m never quite sure of where one thing ends and another begins. Now I know.

  2. Great list. These are so important. I learned HTML basic code when I started my website years ago. But, now with WordPress, I only use it whenever I have to override my style sheet’s font. It really does help knowing it. Thanks for adding it into one post.

  3. Having had to learn a bit of HTML code by default, this is a great post, Lee. With my theme and embedded font, unfortunately I have to make adjustments constantly. For example <em> over exaggerates my words and I have to manually go in and change them all to < i>. There is no way to change this in the CSS style sheet apparently. Also, I have no choices of font sizes in my blog and I have to use or as my sub heading font in my posts. Sometimes I will use the embedded font in bold. I’m still attempting to fully understand alt tags for photos, and really need to do some work on this. Having so many photos already on my site, it is a big job to go in and re name and label them all. I also learned the “target blank” code before my visual editor allowed me to choose that option. So much to learn and I imagine a lot of people do not even have a clue how to do any HTML code. Appreciate this post! Thanks!< /i>< /em>

    1. It is a lot to learn and there are rules to follow. Knowing the basics or at least the differences between things like strong and bold will help people going forward.

  4. Thanks for the information. i knew some of it, but not all, but by reading the text code in my WordPress blog. I will keep this handing for when I need it in the future. &nbsp was confusing to me, now I get it.

  5. This is a nice intro to coding, Lee. When I first started coding for website design, all looked like a foreign language. I didn’t think I’d ever be able to look at a source page and be able to understand it but all it took was practice.

Leave a Comment

Your email address will not be published. Required fields are marked *

persona-freebie-workbook

CRAFTING YOUR PERSONA

GET THE FREEBIE

Download the FREE mini-workbook to get you started creating your audience persona today!

revamp your WordPress website.

NEED SOME DIGITAL HELP?

ASK NOW

Stop signing up for freebies that sit on your hard drive. Sign up now and tell me what you need to help grow your digital presence.

Scroll to Top