Essential HTML for BlogHer Posts

11 years ago

Editors Note: Post was updated 4/5/10

The wonderful new BlogHer is gorgeous! You don't have to use the rich text editor to add links and images to your post, you can write your own html code. Just click input format and select Full html to disable the rich text editor.

If you don't know html, but still want to disable the rich text editor and write some code of your own, here's the info you need to get you started.

  • HTML formats text. Use it to specify which bits of text are paragraphs, lists, headings, blockquotes, and links. HTML also puts nontext elements such as images into your writing.
  • HTML uses tags to mark the starting point and the stopping point of whatever the text is, for example, the beginning and the end of a blockquote. These are opening and closing tags.
  • Some nontext elements don't have to have a closing tag. The image element is the most important for you to know about.
  • Some elements have attributes. The image element is a good example. It needs a couple of important attributes.

The details

You can create a paragraph in your BlogHer posts by pressing Enter (Return) to move the cursor down a couple of lines. No html tags required. The tags get added automatically. But if you want to know the markup, use to indicate the start of a paragraph and

to indicate the end.

Blockquotes are very important in BlogHer. Writers often quote other bloggers or other sources. These quoted remarks go in a blockquote. Put a

tag at the beginning of the quote, and close it with a tag.

The BlogHer style is to link to the source of a quote in the paragraph you write to introduce it. Here's how to write a link. It involves equals signs and quotation marks. Be sure you follow the example exactly as to the lack of or use of empty spaces. Copy the URL of what you want to link to. A link is an (pronounced "anchor") tag with an href attribute that refers to the location of the link. Before the closing tag, you write the text the reader will click to operate the link. If the URL to link to was and the text you wanted to make clickable was BlogHer, here's what you'd write.


Every link follows this pattern, except the URL inside the quotation marks changes and the clickable words before the closing tag change depending on where the link goes.

There are two types of lists. Ordered lists have numbers and use the tags to start and end the list. Bulleted lists are called unordered lists and use the tags to start and stop the list. Each item is a list item and uses

  • to indicate the individual items—whether the list is ordered or unordered. Here's how a finished unordered list with three tiems would be marked up.

    • item one
    • item two
    • item three

    Images use the element with a src attribute that gives the URL for the source of the image. Images also need an alt attribute that gives the equivalent information as text that the images is providing visually. The two attributes use quotation marks and equals signs in the same manner as the example link above. Follow the pattern exactly. The final point about images is that there is no closing image tag. For BlogHer's style of XHTML, an image tag needs a / at the end of the tag.

    Copy the URL of the image. Here's a URL for one of my images on Flickr:

    This is a photo of a giant metal ant at the Rio Grande Botanical Gardens, so some equivalent alt text might be "playground ant sculpture at the Rio Grande Botanical Gardens." Put all that together and here's how it looks:

    playground ant sculpture at the Rio Grande Botanical Gardens

    Just in case that line of code is too long to fit on one line in your browser, I want to point out that there is a single blank space after the quotation mark ending the src location and before the start of the alt information. Put a space between attributes. Also notice that there's a blank space before that /> at the end of the img element.

    If you want to use a movie from YouTube or some other location in a BlogHer post, copy the HTML provided to embed the movie and paste it into your BlogHer post.

    If I left out anything you need to post at BlogHer, just ask and I'll tell you how to do it.

    More from living

    by Colleen Stinchcombe | 12 hours ago
    by Allie Gemmill | 2 days ago
    by Debbie Wolfe | 2 days ago
    by Fairygodboss | 3 days ago
    by Colleen Stinchcombe | 4 days ago
    by Justina Huddleston | 5 days ago
    by Ashley Papa | 8 days ago
    by Colleen Stinchcombe | 8 days ago
    by Colleen Stinchcombe | 9 days ago
    by SheKnows Editors | 11 days ago
    by Kristen Fischer | 13 days ago
    by Fairygodboss | 15 days ago
    by Colleen Stinchcombe | 15 days ago
    by Julie Sprankles | 16 days ago
    by Julie Sprankles | 17 days ago