Everyone should know some HTML. Do you work on your business’ Internet marketing? Then you write. Do you regularly add new content to the business blog or website? Then you’re blogging (or something like it). And HTML is blog grease.
If your website is built with WordPress, then you enter your website content through the Visual tab of the Edit Page screen. This means any buttons you click in the formatting toolbar generate HTML code and manipulate it for you. While the default set of tools are powerful, you can’t do any formatting that’s not pre-programmed.
Chances are you’ve fought a little with WordPress while working on your website this way. For one, it doesn’t recognize line breaks. Anytime you press Enter, it’s a brand new paragraph. Working with multiple images on one page often creates weird spacing issues. And don’t ask me about using tables or columns. There’s a lot of common layout conflicts that cannot be solved through the Visual tab. But there’s another way.
With Text view and HTML, you can view the raw code and fine tune it to your precise specifications. I’d way rather polish the layout by hand than fight automated formatting tools. Get started with Text view and HTML by learning to code hyperlinks.
And there’s more! Use HTML to make interesting call-out boxes, quotes, and simple web buttons. These features can help illustrate your text and break up long copy into smaller chunks that easier to read. Think about the local newspaper or your favorite magazine. The same methods for creating visual interest and easy-reading work on on the web.
You may be tempted to make all of your buttons and layouts with images. That’s not always the easiest or best way to get the look you want online. Rather than making custom graphics in Photoshop, create these effects directly with code. There’s two main advantages to using code for these features:
- Faster load times – Large images come with large file sizes. These large files can take extra time to load on top the other graphics used in your web design. Why annoy your website visitors with a slow website when you can get the same features from quick-loading code?
- Reusable and consistent – Done right, you can reuse the same bits of code over again. This makes it fast and easy to create great effects. You’ll also establish consistency with the style. Consistent colors and font styles throughout your website contribute to the ease of use and readability.
Take a look at the pull quote below and this coded button.
HTML is like butter. Makes everything better.
Want to know how to make CSS buttons or the quote box? If you already know something about HTML and CSS, use the Inspect tool in your web browser to take a closer look at the styling. Search online for tutorials as well, there’s tons of people sharing their skills on sites like Codecademy and Codepen.io.
These effects definitely require intermediate coding skills and confidence editing web design files. Not everyone has those skills right now. And you may not have any desire to learn this stuff, even if you like the effect. If that’s you, ask a web designer to help you achieve features like these.
With attention to the small details of a blog post’s HTML, you can create content that’s easier to read, visually interesting and formatted exactly the way you want it. Forget about the limitations of a simple formatting toolbar, with a little HTML and CSS your blog posts can stand out with style.
Have a question about WordPress or want to know more about the specific techniques demonstrated in this post? Let us know in the comments.