Enter your keyword

Spice Up Your Posts Even More With These 8 Additional Beginner HTML Tags

Spice Up Your Posts Even More With These 8 Additional Beginner HTML Tags

Last week, I gave you a list of html tags to use when you’re using the html interface in WordPress. Those 8 give you a good foundation for making your posts as full-functioning as they were in the visual tab, but there are tons of other html tags that you can learn as well. And according to an article I read this week on the HarperStudio blog, it seems that html is the new 60WPM, so learning this stuff now might just pay off someday when you least expect it. As with the list from last week, please note that these tags only work (in WordPress) when the html tab is selected.

  1. Post a link. Both the visual editor and the html editor in WordPress display a button for creating links. But when you’re in the html editor, you can also use a tag to create a link, and it’s worth your while to learn how to do this so that you can put links elsewhere in your site where placing links is not quite so intuitive (header, footer, sidebar text widgets). The tag you need to create a link is the tag. In html and css “a” always indicates a link, and the way you use it here is to input the following
    text that you want to appear on link here
    where you want the link to appear. For example, to make a link to ABDPBT, I would use this code:
    ABDPBT home page
    Which would appear like this:
    ABDPBT home page
  2. Add accents. To add an accent aigu (as in toupée), use the ´ tag, For example, this:
    toupée
    will give you this:
    toupée
    You can substitute in whichever letter you need to have accented (e.g. á), though I’ve never used it any other way than é.
  3. Add more accents. To add an accent grave and an accent circumflex (as in à chacun son goût, use the ` and the ˆ tags. These work the same way as the ´ tag above, viz. put the letter over which you want the accent to appear inside the tag, after the first ampersand (&) and before the rest of the tag. Note: if you want to use capitals, use a capital letter inside the tag.
  4. Add a blank line within a paragraph. Sometimes you need a line break in the middle of a paragraph (like in the posts above where I show you codes). The
    tag allows you to create a line break without adding a blank line, which also might be useful if you’re trying to display a poem on your site, for example. All you have to do is put in
    at the end of the line where you want the break to appear.
  5. Make an “unordered list.” Last week I showed you how to make an “ordered list” like the one I’m writing now. To make a list with bullets instead of numbers, use the “unordered” tag, or
      . Each list item should be wrapped in a list tag,

    • as follows:

      • This is my unordered list.
      • It will have three items.
      • I hope you enjoy it.


      will give you this:

      • This is my unordered list.
      • It will have three items.
      • I hope you enjoy it.
    • Change the font. Say you want to use a different font from your usual, default font. You can temporarily change the “face” of the font by using tag. for example:
      Typing this
      will render this:
      Typing this
      You can play around with this a little by changing the font names, but bear in mind that only certain fonts will work on all browsers. It’s likely, for example, that courier will render on most computers, since it is a standard font. The same goes with helvetica, verdana, and georgia. But once you start delving into webdings and Zapf Chancery, you’re on your own.
    • Change a font color to match your site exactly. Last week, I showed you a quick way to change the font color within the text of your post. But what if you want to match your site’s color scheme exactly and the generic “red” that html uses is not quite the right color? Well, if you know the color’s html color code\, you can render it exactly in html. For example the color of red that I use on ABDPBT to designate links is #b20c0c. So if I want to have some text in that exact color of red, I would input instead of a name (“red,” “blue,” etc.).
    • Wrap text around a button. See how the list button displayed in the first paragraph of this post is “wrapped” by the text, instead of sitting out on the line all by itself? The way to do this is to instruct the paragraph to wrap itself around the button by using a combination of the paragraph tag

      , the tag, and the link tag, tag. First, we take the tag and add to it some information, e.g.:

      This tells the browser to 1) get the image; 2) align it to the left of the text; and 3) display it in the correct dimensions. Now, since we want this image to serve as a “button” (i.e. link to the ABDPBT home page), we have to wrap it in an
      tag:

      To get the text to wrap around the button, we place this code directly after the first

      tag:

      This is the beginning of the paragraph.


      which renders this:

      This is the beginning of the paragraph.

    • Now you try it!