I originally began learning about the concept of HTML when I was in school studying journalism. It was part of a larger class that taught a variety of website skills to students, and most of the work I did was in Dreamweaver. As a program, Dreamweaver is notoriously finicky and difficult, so I can’t claim that I actually absorbed any of what I learned about designing a website during the course.
I continued my education when I used HTML to style promotional emails. Knowing HTML is not something I'd list as an important email marketing best practice, but the skills I learned have certainly come in handy.
Today, I can say that I’m decent at reading and understanding HTML code. I’ve found this skill valuable to have in many instances; it allows me to insert specific links, change text elements, and troubleshoot when things aren’t displaying correctly.
Today I want to teach you some HTML coding basics that you can use to modify basic text elements and also help you troubleshoot any display issues you may encounter online.
But HTML Is Scary!
Not really. HTML can seem intimidating, but it’s really not that much different than learning how to read and write in a different language.
One of the best resources online to learn HTML is W3 Schools. I can’t recommend this website enough; it is a fantastic free resource that does a great job breaking down the elements of code. It is also easily searchable.
The Basics of HTML
It’s important to understand a few basics of HTML to get started.
You typically open an HTML with a start tag, <tag>, and end it with an end tag,</tag>. Within each tag you will have specific elements. These are noted by a specific letter or series of letters that mean something. Within each tag you can also have attributes to further style elements.
This rule may be a bit difficult to follow now, but just stay with me. I’ll break it down more below.
- To have your code work use tags
- Make sure you include a start tag <tag> and an end tag </tag> for all phrases
- Include correct corresponding letters or phrases to note different elements
- Use attributes for advanced styling
Common Ways to Break Text
There are two ways that you can break text using HTML. The overall look you want to use will depend on what you use.
For paragraph text, you will want to include <p> </p> HTML tags. The opening phrase goes at the beginning of your content, and the closing goes at the end. These tags add a bit more space between your content.
For a softer break, I recommend a using line break tag: <br>. Line breaks are good ways to introduce lines of content without gaping spaces in between. Note that this is an empty tag, which means you do not need to have a closing tag for this.
I will say that you can also use the closing tag version to create breaks </br>. The same rule applies; this is an empty tag.
If you want to give emphasis to any text use headings. Headings are specific formats that will display your text in different ways. There are typically four different sizes (h1, h2, h3, and h4) distinction. Display these using <h1></h1> tags (or replace the numbers for the style you want).
- Use the <p></p> tags to note paragraphs
- Create a softer break using <br>
- Add emphasis with heading tags
Styling Your Text
Want to add some basic styling to your articles? Some basic formatting codes that are good to know:
- Bold: <b></b>
- Underline: <u></u>
- Italic: <i></i>
Make sure these tags are placed around the copy you would like to give emphasis to.
If you want to universally add styling to your text you can do so within a larger text distinction by using a “style” attribute. Attributes are elements that are stated within a tag and will apply for duration of that tag. If you want to style a paragraph, add attributes to a paragraph tag. If you want elements to last the length of your document I would recommend adding a <span></span> tag.
Adding color: Use the “color” attribute to your code followed by a 6-digit color code that matches your hue. You can find the 6-digit code using Photoshop or another color picker extension on your browser.
Changing Font: Use a “font-family” attribute to change your font, and change the size by using a “font-size” attribute.
Let’s put these into action. If you want to turn a paragraph of text a nice blue color, have the font display as arial, and the font size display as a 10px size, do so by adding:
<p style=”color: #4285F4; font-family: arial; font-size:10”>paragraph text</p>
- Use the style attribute for styling HTML elements
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
Links can sometimes be difficult to manage, and for this reason it occasionally makes sense for me to flip into HTML and add these manually.
You will use the <a></a> tags to designate a hyperlink and an “href” attribute to designate a destination address. The code for adding links is: <a href=”URL”> link text </a>
To specify where a link opens you’ll add in a “target” attribute To open a link in a new tab or browser you will use the phrase: <a href=”URL” target=”_blank”>link text</a>.
All links default to displaying in a blue color and are underlined. If you want to change the color you can apply the same “color” attribute rules from above to your link code. If I wanted my URL to display in a grey color, my final code would read: <a style="color: #999999; href=”URL” target=”_blank”>
- Use the <a> tag to define a link
- Use the href attribute to define the link address
- Use the target attribute to define where to open the linked document
- Change the color formatting using the color attribute
One Final Note
If you learn anything from this blog, I hope you learn this: if something isn’t displaying properly on your website, look into the code. When operating in a website your template will already have universal formatting outside from the specific page code you are reading.
There have been many times that I have copied something in from Microsoft Word or a Google Doc and I will find additional code that carries over into my post. By removing this formatting and starting fresh I can usually fix any problems.
What other HTML basics do you use often? How do you feel about HTML code? Leave your comments in the notes below!