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