Common HTML Codes That Come In Handy When Building Your WordPress Website
With the availability of great WordPress themes and page builders, and the styling and other tools available in the WordPress page editor, you may think you really don’t need to worry too much about HTML these days. However, there are still times when HTML is needed. Perhaps you are utilizing the free WordPress platform to create a promotional blog for your business. Maybe you are using another site builder like Weebly, or have otherwise run into another instance where you need to know some code. In these cases you may need some Common HTML Codes That Come In Handy When Building Your WordPress Website. And then too, if you operate a website or blog online, it never hurts to know some basics.
Mostly pertaining to text styling, the following codes are commonly used to create the look you want when setting up the content of your pages and posts. Remember, if you find yourself in need of some HTML code for your site, go to W3Schools where you can look up anything you need and learn how to do it – for free! This includes HTML5, JS, and css as well.
*Before We Get Started Please Note: All html codes must be closed, just like you would close a sentence. Otherwise the styling you enter will continue throughout the rest of the page. To best demonstrate this, we will take a bold styling for instance; the following code <strong> will bold the text after it, and you must place this code </strong> to close the bold styling. Codes that use <span> must be closed with </span> and so on. Also, note that html code can only be used where html access to the page is available. In wordpress you can access this by selecting the “text” tab right next to the “visual” tab in the upper right hand corner of your page or post editor. In Weebly, make sure you are in an html element, and html can also be used to style text in elements like the “caption” field of the images editor when you upload an image.
Text Styling Codes
Bold Text
<strong>This text will be bold.</strong>
*Note: the old <b> code command should no longer be used.
Text Size Code (Large):
This code will style your text to the size indicated in the code.
<span style=”font-size: large;”>Text Here</span>
<span style=”font-size: x-large;”>Text Here</span>
<span style=”font-size: xx-large;”>Text Here</span>
*Note that “large” can be replaced with “small” for smaller text.
Text Color Code:
This will cause your text to appear in the color indicated in the code.
<span style=”color: orange;”>Text Here</span>
*Note that “orange” can be replaced with other true colors like red, blue, and green. You may also use color codes in place of the color name, like so: #001029. To find the code for a specific color, consult W3Schools’ color picker here>>
Combine Text Size & Color Code:
<span style=“verdana” color=“green”>This is some text!</span>
Page Jump Code
This code creates a “jump link” to another portion of the page or to another page on the site.
For the Link: <a href=”#unique-identifier”>Click Me</a>
(Replace unique-idendifier with your location, like “#references”)
For the destination: <a id=”unique-identifier”>Text</a>
(Replace unique-idendifier with your location, removing the # symbol, like this: “references”.)
Click Me, and Text can be replaced with any text. (Example: >See Our References<)
Text & Image Link Codes
You should not need these very often, as image and text links can be easily inserted using the WP page editor tools, but again, it never hurts to know the basics. For this reason I have included basic link codes.
Text Link Code:
<a href=”http://www.domain.com/page/”>Text Here</a>
Image Link Code:
<a href=”https://domain.com/image file”><img src=”smiley.gif” alt=”Example” width=”300″ height=”300″>
Insert Image Code:
<img src=”smiley.gif” alt=”Example” width=”300″ height=”300″>
Try these codes out on a page and see what you can create! You will see that it is not that difficult, and you will feel a bit more comfortable having acquired some new skills!
You may want to copy these codes and save them to a document for easy access just in case you need them, and be sure to check back for updates on this list of Common HTML Codes That Come In Handy When Building Your WordPress Website. If you come across a code you think should be on this list, be sure to leave your suggestion in the comment section!