Some useful HTML tags for WordPress

If you look in the upper-right-hand corner of the WordPress editor, you’ll notice tabs that toggle between a visual/WYSIWYG mode (What you see is what you get, that is) and a text-based display. In the text mode, you can hand-code html tags. WordPress will hide some of the tags from you when it deems them redundant. For example, the <p> and </p> tags, for paragraphs, are only displayed when they include a style modification.

Screenshot 2014-02-24 13.23.05

HTML/XHTML tags have a few simple rules:

  1. Tags are enclosed in angle brackets, and they mark portions of a text. An opening tag (<li>, for example) opens the portion of text, and a close tag (</li>, for example), closes the portion of the text. In XHTML, every tag must be closed. Some tags, like image tags, don’t enclose text. You can close these tags with a slash inside the opening tag (like <img />).
  2. In XHTML, all tags are in lowercase.
  3. Tags can be nested within each other, but you each needs to be closed within its context. That is, you can do something like <em><strong></strong></em>, but not <em><strong></em></strong>.

Some tags that can help you understand/change what you’re seeing in the text editor:

  1. <em> stands for emphasis, and usually makes something italic. That is, <em>example</em> will display as example.
  2. <strong> means bold, so <strong>example</strong> will display as strong.
  3. Links are marked with an “anchor” tag, <a>. The key attribute of an anchor tag is an “href,” or “hypertext reference.” If I want to link to Google, for example, I would use this syntax: <a href=”http://www.google.com”>Google</a>, which would result in a link like this: Google.
  4. To link to images, use an <img> tag.  The key attribute here is “src,” for “source.” When you upload media to WordPress, it’ll figure out the location of your image for you. But one can also link to an external image. For example, if I wanted to show the image on Google’s front page, I might use <img src=”https://www.google.com/images/srpr/logo11w.png” /> to display
  5. Using <br />, you can force a break in the text. Inserting <br /> between “hi” and “bye,” for example, will result in
    hi
    bye
  6. HTML has built-in tags for lists. For an ordered (numbered) list, you use <ol>, and for an unordered (bulleted) list, you use <ul>. Each list item is enclosed in an <li> and </li>. So, for example, <ol><li>apples</li><li>oranges</li><li>bananas</li></ol> displays as
    1. apples
    2. oranges
    3. bananas

    and <ul><li>hamburgers</li><li>crossainwiches</li><li>mcgriddles</li></ul> displays as

    • hamburgers
    • crossainwiches
    • mcgriddles
  7. The <blockquote> tag sets off a blockquote. For example, <blockquote>”I saw your girl last night,” Ratz said, passing Case his second Kirin. <br /> “I don’t have one,” he said, and drank. <br /> “Miss Linda Lee.”</blockquote> displays as:

    “I saw your girl last night,” Ratz said, passing Case his second Kirin.
    “I don’t have one,” he said, and drank.
    “Miss Linda Lee.”

  8. To create a horizontal line that spans the width of your post, use <hr /> (for “horizontal rule”). It will display like this:

  9. For the most part, the display of your content will be controlled by the CSS (Cascading Style Sheets) files for the entire site. In paragraph <p> and span <sp> tags, though, a “style” attribute can include localized CSS to alter the look of a specific paragraph or span of text. For example, <span style=”color: orange; font-size:smaller;”> will result in a span that looks like this.
  10. Headings, from <h1> (the biggest) to <h6> (the smallest) are marked with heading tags. So, <h1>This is a heading</h1> will look like this:

    This is a heading

    and <h6>This is a smaller heading</h6> will look like this:

    This is a smaller heading

Leave a Reply