Common HTML Codes That Come In Handy When Building Your WordPress Website

Common HTML Codes That Come In Handy When Building Your WordPress Website

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.

Common HTML Codes That Come In Handy When Building Your WordPress Website

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!

Common HTML Codes That Come In Handy When Building Your WordPress Website


About the Author

14 Comments

  • Hello there! I could have sworn I’ve been to your blog before
    but after going through a few of the articles I realized it’s
    new to me. Regardless, I’m definitely delighted I stumbled upon it and I’ll be book-marking it and checking back frequently!

    • Admin Author May 1, 2016 at 8:32 am

      Thanks for stopping by and leaving your comment; we appreciate it, and we are glad you found our post interesting! We look forward seeing you on our blog again soon.

      • Kaden August 20, 2016 at 12:36 am

        Good web site! I really love how it is easy on my eyes and the data are well written. I’m wondering how I could be notified whenever a new post has been made. I have suicbrsbed to your RSS feed which must do the trick! Have a great day!

        • Admin Author August 30, 2016 at 5:21 am

          Thanks so much, we are glad you enjoyed the post! You should receive our latest posts via RSS feed, if not please be sure to let us know so that we may fix it. You can also get updates about our latest posts, digital products, and helpful video tutorials (coming soon) by subscribing to our newsletter here>> We hope you will join us for this great content! We hope you have a great day as well!

  • qs help July 4, 2016 at 10:00 am

    I’m really inspired with your writing skills and also with the structure to your blog.
    Is this a paid theme or did you customize it your self? Anyway keep
    up the nice quality writing, it’s rare to look a nice weblog like this one these
    days..

    • Admin Author July 6, 2016 at 4:11 am

      Thanks for visiting, we are glad enjoy our writing and structure; we work hard to try to make sure that the site is easy to use, and informative. We are also glad you liked the post, and hope you found it helpful! We are using the ReHub theme (paid) with minor customization to keep things simple. You can get the theme by following this link…

    • Kristanna August 20, 2016 at 12:14 am

      Terrific work! This is the kind of info that are supposed to be shared around the web. Shame on the search engines for not poiioitnsng this submit higher! Come on over and seek advice from my web site . Thanks =)

      • Admin Author August 30, 2016 at 5:27 am

        Thank you so much for your kind and supportive comment; we are glad you enjoyed the post! We tried following your link, but were unable to reach your site; if you would like to post another link we would be happy to come visit! Thanks again for visiting our blog!

  • whoah this blog is fantastic i really like reading your articles. Stay up the good paintings! You already know, a lot of individuals are hunting around for this info, you could aid them greatly.

    • Admin Author August 30, 2016 at 5:41 am

      Thank you, we are happy that you liked the post, and perhaps found it helpful. We will be sure to keep up in our efforts to inform, and help our readers. Hope to see you here at the blog again!

  • writing essay August 23, 2016 at 11:46 am

    I am truly grateful to the owner of this web page who has shared this enormous paragraph at at this place.

  • hacking a facebook account August 29, 2016 at 1:26 am

    That is really interesting, You are an overly professional blogger. I have joined your feed and stay up for in quest of more of your magnificent post. Additionally, I’ve shared your website in my social networks. you can look here: http://alturl.com/tkq55

    • Admin Author August 30, 2016 at 5:13 am

      I am so happy you enjoyed the post, and hope you find the information helpful! Thanks for your comment, and joining our feed; we appreciate these engagements, and hope you like our future posts!

website
statistics
error: Content is protected !!
%d bloggers like this: