Essential HTML for BlogHer Posts
by Virginia DeBolt

The wonderful new BlogHer is gorgeous! I love the salmon background! Big exclamation mark for the new design and functionality.

If you're a BlogHer contributing editor you may want to learn some really basic HTML now. The new BlogHer allows readers to write posts, too. So this info is for new posters, too.

First, some basic concepts. Then the details.

  • 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 tags required. The <p> tags get added automatically. But if you want to know the markup, use <p> to indicate the start of a paragraph and </p> 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 <blockquote> tag at the beginning of the quote, and close it with a </blockquote> 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 <a> (pronounced "anchor") tag with an href attribute that refers to the location of the link. Before the closing </a> tag, you write the text the reader will click to operate the link. If the URL to link to was http://www.blogher.com and the text you wanted to make clickable was BlogHer, here's what you'd write.

    <a href="http://www.blogher.com">BlogHer</a>

    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 <ol></ol> to start and end the list. Bulleted lists are called unordered lists and use the tags <ul></ul> to start and stop the list. Each item is a list item and uses <li></li> 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.

    <ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three</li>
    </ul>

    Images use the <img> 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:

    http://farm2.static.flickr.
    com/1172/847016355_5d6cecb1ba.jpg?v=0

    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:

    <img src="http://farm2.static.flickr.
    com/1172/847016355_5d6cecb1ba.jpg?v=0" alt="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.

    Submitted by Virginia DeBolt (view blog) on Tue, 07/24/2007 - 08:24

    Comments

     

    Ha! Another champion for salmon!

    Thanks for this. I know only the most basic html and am constantly losing the codes for images. ;)

    Sassymonkey and Sassymonkey Reads.

    Submitted by sassymonkey on Tue, 07/24/2007 - 06:41
     

    HTML is logical

    Yeah, anything in the orange/yellow range is my fav!

    I know it seems mysterious, but HTML is pretty logical. For example the SRC means "source" or the location of the image. ALT means "alternative," which is a text version of the information the image presents. For images, the details can be a bit nasty, because you do have to get the equals signs and the quotation marks right.

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Tue, 07/24/2007 - 06:49
     

    Thank You!! You are awesome!

    Thanks so much for this. I'm not a total html newbie, but I don't know the tags for all the things we need to make a post look good. I was thinking I'd have to look them up before Thursday, and I'm just a tiny bit busy here, so thanks!!

    Kalyn Denny
    Kalyn's Kitchen

    Submitted by Kalyn Denny on Tue, 07/24/2007 - 06:44
     

    Thanks

    I just mentioned the tags I think are most often used in BlogHer posts. But if you look below the Input format options at the end of the form where you enter your post, you'll find a link to "More information about formatting options" that gives a whole lot more info than my essentials list.

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Tue, 07/24/2007 - 06:48
     

    Very funny!

    One more thing you may find funny. When I read through your post, I knew some of this stuff, but in my (non-trained, learned by intuition) understanding of html I was calling them all something entirely different, for example I thought "li" was list, instead of link item!

    Kalyn Denny
    Kalyn's Kitchen

    Submitted by Kalyn Denny on Tue, 07/24/2007 - 06:48
     

    The secret code

    p is paragraph
    ol is ordered list
    ul is unordered list
    li is list item
    a is anchor (makes little sense, that. It's a link element)
    href is hypertext reference
    img is image
    src is source
    alt is alternative text
    blockquote is ,duh, blockquote

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Tue, 07/24/2007 - 06:54
     

    Question about HTML

    I have a question. When I use wordpress to write my draft, I noticed there is a tag that says "code". When I click on it, it seems to be similar to what you are showing here. My question is...If after I write a draft in WP, could I click on the code button and copy/paste to blogher? Would that code be compatible with what I need for my posts on blogher?

    Sorry, I'm not very good with this HTML stuff. I do appreciate your help. Thanks so much.

    Contributing Editor Catherine Morgan
    also at Women 4 Hope and Informed Voters

    Submitted by Catherine Morgan on Tue, 07/24/2007 - 08:57
     

    code is to format as code

    The <code> element formats something in monospaced type as if it were code. It doesn't change something to code, it just puts it in a font that appears the way code appears. Does that make sense?

    For example, to get the brackets and other code bits to appear in my post as brackets for the demo HTML, not as actual tags to format something as whatever, I had to enclose everything in code tags. You can also use a <pre></pre> format for this, but code is more semantically accurate for what I was showing you.

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Tue, 07/24/2007 - 10:34
     

    Hmm.

    Amusingly, however, your addition of the code box has taken the width of the post over the intended space and out into the background, behind the ad in the cases of anything above the fold. (Using 1024x768, Firefox.)

    That said, I prefer the green background. So relaxing!

    Family Living; Hatfield Style
    Birth/First Parent Blog
    The Chronicles of Munchkin Land.

    Submitted by JennaHatfield on Tue, 07/24/2007 - 09:12
     

    a beta issue

    The BlogHer beta rollout team have been alerted to this and are trying to figure out what's causing it. Thanks for mentioning it.

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Tue, 07/24/2007 - 10:36
     

    Flickr

    One thing: if you're going to post an image from Flickr, they require you to link back to the image's Flickr page. If you go to the "all sizes" link on that image's page, it will give you the code.

  • Five Dollar Camera
  • Hypnotizing Chickens

    • Submitted by kperfetto on Tue, 07/24/2007 - 09:18
     

    good point

    The way I did it doesn't show anything but the image. Doing it the way you mentioned would be better for Flickr. All the Flickr material would show up. And better for me, too, because it would give people access to the rest of my photostream. Thanks for the info.

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Tue, 07/24/2007 - 10:41
     

    Good to be reminded

    Thanks for the clear and helpful tips. I am collecting the articles to inspire and guide me to making a series of long overdue changes to my blogs. I am off on vacation soon, and I've put some time aside to make the changes.

    lia from luebeck, germany

    Author of the yum yum cafe and coauthor of the Red Tent Blog.

    Submitted by Lia on Tue, 07/24/2007 - 11:55
     

    ooh...so exciting to find this all in one
    place

    Thank you. This is very, very helpful stuff.

    laurie
    www.notjustaboutcancer.blogspot.com

    Submitted by laurie on Tue, 07/24/2007 - 18:59
     

    Thanks and a fix

    Thanks to Lia and Laurie for the good words.

    For those of you just now reading this and wondering what Jenna's "Hmmm" was all about, that has been fixed. It all involved the way this new version of BlogHer handles certain tags. (Probably not any of the tags Contributing Editors or readers will use to post.) Took a while to figure it out, but it's good to go now.

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Wed, 07/25/2007 - 04:29
     

    help! I can't find my forum topic!

    I am so excited that the new blogher allows us in the rank and file to post topics a little more dynamically. I just posted about pre-conference jitters under the blogher conference/beginners topic, but now I can't find it anywhere. Where are the forum topics, and will the recent/active ones still be listed on the main page? That was always my jumping-in point on the old site. I rarely went browsing past the front page, unless something in the sidebar caught my eye.

    Can you help me find my post? I wanted to tag it as well (shiny, candy-like tags!)
    Kyran, Notes to Self

    Submitted by kyranp on Wed, 07/25/2007 - 05:21
     

    Recent Activity, Kyran?

    I've never been sure how many people used that feature of the old site. I had it on my list of "oops where did that go" and it's still on my list because I sometimes have trouble finding MY content, too! We're really going to work on this issue.

    Here is your forum post about Pre BlogHer Jitters

    Thanks for your patience!

    ~Denise
    Fast Times @ Homeschool High & Flamingo House Happenings

    Submitted by Denise on Wed, 07/25/2007 - 06:01
     

    Re: Recent Activity, Kyran?

    Good morning Denise,

    I've been looking for those "Recent Activity" and "My Recent Activity" links too! :-)

    To find my posts, I've been using "bobafifi 2007" in the search, which works eventually - but not immediately - at retrieving the most recent ones.

    -Bob
    bobafifi.com
    usedviolins.com
    fluteplayer.net

    Submitted by bobafifi on Wed, 07/25/2007 - 06:11
     

    Denise, you're a good boy scout. :)

    I really hope you will integrate those features into the new site. I followed the grassroots forum topics/comments at least as much as the official editor posts.

    Thank you for excavating my post. How would I get there, or to any other new forum topic from the main page?

    I feel like your grandma with alzeimers! I appreciate the hand-holding getting across the street.

    Kyran, Notes to Self

    Submitted by kyranp on Wed, 07/25/2007 - 06:18
     

    Tracking... The answer to this Tracking...

    In your account settings you'll find a tab on the right side of the page that says "track". This shows all of your activity on BlogHer. It functions very much like the old "recent activity" box but this contains only your activity.

    http://www.blogher.com/user/denise/track is my track url (Don't stalk me! Or go ahead and stalk me, I don't mind lol) Replace my name with your username and bookmark that one.

    Or you can find your way to the track tab by following this path:

    Click My Profile (purple button, right corner)
    Click Edit My Profile (top right side of the profile page)
    Click Track (top right side of the edit profile page)

    ~Denise
    Fast Times @ Homeschool High & Flamingo House Happenings

    Submitted by Denise on Wed, 07/25/2007 - 06:20
     

    Re: Tracking... The answer to this
    Tracking...

    > http://www.blogher.com/user/denise/track

    Thanks Denise!
    That's the link I was looking for.
    Would it be possible to add that link to the "my profile" page?

    -Bob
    bobafifi.com
    usedviolins.com
    fluteplayer.net

    Submitted by bobafifi on Wed, 07/25/2007 - 07:33
     

    That's one idea I had

    I'm not sure if that's going to happen since it's only one more click to get to that tracking link - but I'm going to request it, along with a couple of other links (BlogHer blog, Contact) so others can find you easily.

    ~Denise
    Fast Times @ Homeschool High & Flamingo House Happenings

    Submitted by Denise on Wed, 07/25/2007 - 08:08
     

    Re: That's one idea I had

    > since it's only one more click to get to that tracking link

    From where? I'm not sure I'm following you, sorry. I did add it to my page (under Snapshot), but the HTML doesn't work:
    http://www.blogher.com/haystackprofile/viewprofile/bobafifi

    Thanks Denise,

    -Bob
    bobafifi.com
    usedviolins.com
    fluteplayer.net

    Submitted by bobafifi on Wed, 07/25/2007 - 08:17
     

    When you are on your profile page

    Click edit profile on the right side of that page and then click "track". So just one click from your page for you to access your tracking link.

    :-)

    ~Denise
    Fast Times @ Homeschool High & Flamingo House Happenings

    Submitted by Denise on Wed, 07/25/2007 - 09:27
     

    Finding a forum post

    We're straying a bit into the "Using this site" realm, but the Forums are located under the Community link at the top of each page. If you recall which forum topic you posted in, you should be able to find your post.

    I found it by going to Community > Forums > Beginners Going to BlogHer > and saw your post was listed as "got a vanity to toss on the bonfire."

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Wed, 07/25/2007 - 06:24
     

    not trying to be a pain in the neck

    So, if someone steps forward to introduce a new topic, themselves, or a question, where do we see that now?

    postscript: Thanks Virginia! I will direct future questions along this line to the correct thread!"

    Kyran, Notes to Self

    Submitted by kyranp on Wed, 07/25/2007 - 06:31
     

    Ok, but

    do you know how to find what you wanted now? I don't want to leave you hanging.

    http://www.webteacher.ws/
    http://first50.wordpress.com/

    Submitted by Virginia DeBolt on Wed, 07/25/2007 - 07:20
     

    sort of

    Virginia, I now know how to get to a forum topic I already know about, but am missing being surprised and intrieged on the main page by snippets of those I don't already know to go looking for. Does that make any sense?

    Also, I still don't know how to tag my forum topic, or is that feature just for blog posts?

    Good grief, this is like my fifteenth comment here this morning! Lest it appear I somehow got lost here in the new site and can't find my way out, I am actually vacuuming, folding laundry and PACKING! in between dipping my toes in the spiffy new blogher pool.

    Kyran, Notes to Self

    Submitted by kyranp on Wed, 07/25/2007 - 07:51
     

    Finding new stuff and tags.

    Right now, you can't tag forum posts. I'm not sure if we're going to add forum post tags or not - if we can do it, I'm going to vote to ad them.

    To find new content, clicking the "all posts" tab is probably the quickest way to find the new blog entries. Forums, that's a bit harder and the only good way is to subscribe to the Forum RSS feed.

    Do you use a feed reader like Bloglines or Google Reader?

    ~Denise
    Fast Times @ Homeschool High & Flamingo House Happenings

    Submitted by Denise on Wed, 07/25/2007 - 08:06
     

    I do use a reader, but I'm

    I do use a reader, but I'm an extreme minimalist about subscriptions.
    Honestly, I would probably never look at the forums if it weren't for those teasers that catch my eye up front. I loved that a newbie intro or question warranted a teaser on the index page. To me, it was evidence of the grassroots nature of blogher.

    But that's just me. You all are doing an outstanding job helping us get re-oriented.

    Kyran, Notes to Self

    Submitted by kyranp on Wed, 07/25/2007 - 08:24
     

    Agreed...

    That's part of why we've made some of these site changes - to give members more ways to create content and get noticed.

    Point well taken regarding the forums though, they are no longer featured on the front page. We have to figure out some ways to feature those.

    ~Denise
    Fast Times @ Homeschool High & Flamingo House Happenings

    Submitted by Denise on Wed, 07/25/2007 - 09:29
     

    Profiles?

    I think this came up yesterday somehwere, but can we use html in our profiles? And is there a way to get rid of the underscores/

  • Five Dollar Camera
  • Hypnotizing Chickens

    • Submitted by kperfetto on Wed, 07/25/2007 - 08:56
     

    Nope

    HTML isn't accepted in profiles. We can't eliminate the underscores because the profiles turn everything into "tags". We'll be explaining this more fully soon because we're working on an update for profiles that will be really exciting for everyone.

    ~Denise
    Fast Times @ Homeschool High & Flamingo House Happenings

    Submitted by Denise on Wed, 07/25/2007 - 09:30
    BlogHer

    © Copyright 2009 BlogHer | Terms of Service