Can't add horizontal line under post title?

Hi buddies,

The code above seems correct, and if you saved your files it should work. Which template file did you add the code to? Is it index.php?

I have twenty ten theme, and I add it in loop.php

It looks like this file has different options for different kinds of post formats. In your twenty-ten child theme copy loop.php and try adding the hr tag at about line 126 of your code editor. It should look like this (I’ve already added the hr tag below):

<?php /* How to display all other posts. */ ?>

  <?php else : ?>
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	  <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

         <hr>

         <div class="entry-meta">
	   <?php twentyten_posted_on(); ?>
	 </div><!-- .entry-meta -->

The reason why the hr wasn’t showing must be because it was inserted at the beginning of this file and it wasn’t referencing the right post category.

Here’s what the twenty-ten team says at the top of loop.php

In Twenty Ten we use the same loop in multiple contexts
It is broken into three main parts: when we’re displaying
posts that are in the gallery category, when we’re displaying
posts in the asides category, and finally all other posts.

So there is more than 1 place where you might look to insert the hr tag.

Thank you very much for your help! I will look into it again then.

Thank you you were right. I have now found the right place to insert the <hr> code. So, it’s working now. Thank you so much for your help! I will mark this post as resolved.

That’s great!

In addition in thinking of the future, another way to achieve the underlining of the post title is to use CSS. ??

Something similar to:

h2.entry-title {
text-decoration: underline;
}

The reason I suggest this is that the <hr> tag – along with several others – are ‘deprecated’/not used in newer versions of HTML. This means that in the future, web browsers may not support the tag and so may not render them correctly.

The CSS, on the other hand, is compliant and will be more friendly in moving forward in terms of web browser compatibility.

Cheers and thanks to antonietta for helping out! ??

Hi EMG,

If the desired effect is the same, using CSS is a great solution. Personally, I think it’s better than modifying a template file. The only argument that I can see against the CSS alternative would be that the hr tag might be more flexible to style. If you’d like the underlining to have a different color from the heading, for example, it’d be a problem with the text-decoration property. But apart from this, as I said, I would also go with CSS.

My curiosity, though: where is it possible to read more about the hr tag being “‘deprecated’/not used in newer versions of HTML”? If it’s so I’d like to know more about it and about any other tags that may face the same fate. I browsed the internet but couldn’t come across this information. Thanks in advance.

Hi again. ??

If you look up in a search engine HTML5 and deprecated, you ought to be able to view a list of HTML tags that have become deprecated. I follow W3C’s news so that is how I learned of this some time ago when HTML5 was released.

If you ever use the W3C Validator to validate HTML markup, it, too, will notify you of deprecated markup tags as applicable to the version of HTML you are using.

Re: Flexibility of hr tag versus CSS:

I definitely understand what you mean – that sometimes, the older markup methods seem to accomplish a task better – and in the case of the changing color of the underline, another way would be to do a border-bottom on the CSS applied to the h2 tag and select the color accordingly.

Additionally if someone were looking for a way to an hr-like line across a whole page or article or some such, a way would be to create a div and class it for sitewide use and specify dimensions to create the shape of a line – 80% width and 2px height with a grey background, for example.

Hi EMG,

Your suggestion of using CSS has led me to a better solution than adding the hr tag by modifying a template file. Why not using a pseudo element, like this:

#content .entry-title:after {
    background: #FFFF00; /* change bg color, obviously */
    content: "";
    display: block;
    height: 2px;
    min-width: 100%;
    position: relative;
    top: 10px;
}

This has the advantage of adding the desired element without touching a template file and without giving up the flexibility of styling the element any way one wants.

With regard to the hr tag, however, I’m still at a loss. The only information I can find is that, while in HTML4 hr was a simple horizontal rule, in HTML5 it represents a thematic break in between chunks of content. Also, I don’t get any validation errors for HTML5. I’d be very grateful if you could share a URL where I can access this information, I’m sure it’s not only me it’d be very useful to. Thanks so much.

You know, I rechecked my sources and I stand corrected.

The <hr> tag itself was not deprecated (there was discussion for it to be, once upon a time, and HTML5 ended up re-purposing it and gave it a slightly different purpose), but the inline styling like noshade etc is no longer acceptable and therefore, would throw up the Validation errors.

In HTML5, <hr> now has functional meaning – it can indicate a pause in the flow of a document, for example like you said, but as such, probably should not be used as an underlining element.

As such, I still maintain that for true underlining rather than the literal breaking of a post/series of thoughts into segments, styling with CSS using either the underline ability or border ability is still probably best.

And yes, what you demonstrated would be a good way (aside from using the <hr>) to automatically add a visual line spacer after the header.

I guess what it boils down to is what purpose is the line being used for, right? To underline, to separate content, or what?

Thanks for asking questions; helped me to clear some things, too, and sorry for the confusion. ??

Cheers!

Thank you EMG, your intervention has brought about a few alternative solutions on all sides, which is always a positive outcome on a widely attended forum such as this.