How do I make a separator that doesn't necessarily represent the thematic break <hr> vs <span>, <div>, css, etc.
I've always liked the tag <hr>
as a design separator because it's a short empty tag and you can use CSS to create it with a theme. I like it better than border-bottom, because you can set the width less than the content above it, i.e. 25% of the container's width.
I almost feel like there should be an empty tag that serves as an anchor point for the CSS design.
I know I can do it with any tag with CSS:
<div class=divider></div>
works just fine, but it's not as succinct as <hr>
So it <hr>
seems to me the best choice on the surface.
Then I read the semantic meaning of HTML5 <hr>
which says it is a thematic break. (This seems a bit arbitrary) is the title of a different topic than the content? How about semantic cases where I want to have a title for a post with a nice margin above the image with a title at the top and a separator and subheading below it?
I want my content to make sense for syndication, and I want it to look good if opened in a different css, favorite safari reader, who again seems to say it is <hr>
n't a good choice.
Should I use <span class=divider></span>
that seems wasteful. I also considered <svg>
or <br>
, but it <br>
seems to me an empty string and perhaps also semantically, like a pause, like a comma in a sentence. What's the best way to have a horizontal separator semantically, when the main reason is design preference over thematic break?
source to share
I think from your suggestions I would just go ahead and use a separate custom div <div class="box-divider"></div>
, it really isn't that wasteful if it's an integral part of your structure and gives you the most flexibility in terms of what your divider will look like as well as positioning. You can honestly do the same with a tag <hr>
, if you customize it with css you can make it look however you want.
Many users comment on the use of psuedo elements in an element that needs a divider which is a great suggestion.
.box {
position: relative;
}
.box:after {
content: '';
display: block;
width: 100%;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background-color: green;
}
If it's as simple as a borderline, you can just use border-bottom: 1px solid black;
, for example, for the element itself and skip having to create a separate element. Add a bottom bottom to control positioning.
In general, if it's a complex / custom separator that you need, I'll just use a separate div or pseudo-separator separator.
source to share