I’d like some suggestions on the best way to approach a bit of HTML layout from a semantic perspective. The page in the pen below is splitting my name across two lines, using a couple of <p> tags. Whilst visually, this gives me exactly what I want to see, it doesn’t feel right to be using the <p> tags in this way for a name, but I’ve yet to come up with a better way of doing it. <h> tags are about the closest, but as they’re inline elements, they don’t feel right either. I’d like both first & surname to come within the scope of a single tag, but split across two lines like you see here. Ideas?
Why not use <br> to break the line?
<h1>Chris<br>Perry</h1>
1 Like
To be honest, I didn’t think you could do that with <h> tags, but that would probably do it.
Edit: I’d need to <span> each one to get the colour effect, but that’s not an issue.
I never considered that you can’t. I just checked and it validates.
1 Like
So did I, and it does - problem solved
Hi there chrisofarabia,
if semantics are your consideration, then I don’t think that the
“h1 element” or the “p element” would be the correct choice. 
Perhaps this…
[code]
untitled document strong { color:#000; } strong span { display:block; color:#f00; } ChrisPerry [/code]…might be rather more appropriate. 
coothead
1 Like
Being ‘old school’ (and most of my comments here are my personal take on these things) I would disagree with this and would use p elements or heading tags for most phrases. A paragraph can actually be one word if required if it makes a point separate from other points in the prose.
You could add the inline phrase elements as in your example inside the p element to give it more semantics but note that previous to html5 it was invalid to have inline elements as direct descendants of the body.
Html5 allows inline elements as direct descendants of the body but the semantics become blurred because you have an inline element that will run into a block element unless there is nothing else on the page.
e.g.
<strong>Chris<span>Perry</span></strong>
<div>Stuff</div>
Now the first thing the browser has to do is to construct an anonymous block box around the strong element so that you have block boxes meeting block boxes so why not use a block box to start with and keep the semantics in check.
Therefore I will always try to keep inline elements in a suitable container and not have them hanging in mid air although I do break the rule for ‘a’ elements now that they can wrap block elements.
As I said html5 does allow these ‘inline fragments’ so it is perfectly reasonable to use them but from an old school semantic point of view I prefer to keep things more structured even if it means adding an extra tag.
Otherwise we would end up with code like this that is perfectly valid but not semantic.
<div>This code is perfectly valid so what's wrong with it?
<p>I don't know you tell me </p>
Ok I will.
</div>
I must re-iterate again that the above is my personal interpretation on these things and I know others disagree.
In answer to Chris’s original question I can see that a heading tag might be appropriate here but I would have been inclined to use a dl list as you have a data term (Chris Perry) and then you have some information below about Chris Perry would would be the data definition.
4 Likes
I did think about using css to make the break, the concern being whether the <br> tag had any semantic meaning in defining some kind of break in the content, or whether it is purely presentational.
But I don’t find anything to say it does have any semantic meaning.
Though html purists may argue that a tag which is purely presentational and has no semantic meaning has no place in the html and the presentation should be handled by the css anyway.
The break has the exact semantics that you want here as it specifically meant to break lines of text that are not adjoining paragraphs. That’s why its use is advocated in addresses, poems and songs to break each line while the parent is wrapped on the p tag.
4 Likes
Do these semantics really really matter?
I’ve seen several arguments/discussions along these lines, but none of them serve any major purpose. Just make it work without using any ridiculously wrong tags and get on with developing the site. These fine details tend to get in the way of things.
Yes, I’m against stupid use of inappropriate tags such as a blockquote when it’s just part of the layout to get a visual effect and margins should have been used in a class for the same effect.
Me? I’d use <p>first<br><span>second</span></p> with some css to style it.
[off topic]
I think “Semantics vs Aesthetics” is worthy of it’s own topic.
[/off topic]
2 Likes
That’s an interesting option actually. What I’m doing is intended as a test piece, that will never see light of day on the open web. The <dl>, <dt> & <dd> tags are not ones I’ve really had need to play around with before, but there is more about them semantically, that seems to fit the bill. That said, the page such as it is, wouldn’t have an <h1> tag otherwise, and it seems its use would be valid as suggested above, as the page is intended to be something about myself, and my name would seem to be the single most important attribute in that instance (I’m not an egomaniac, honest).
It’s an interesting discussion though…
It is well over fifty years since I left school and, although my faculties
of recall leave much to be desired, I do seem to remember that a
paragraph would consist of a collection of related sentences which
concerned one subject. Personally, I do not believe that “one word”
can really meet that criteria.
Of course, my memory may well be playing tricks on me and I’m just
talking a load of cobblers. So nothing unusual there. 
As for the strong element, I unfortunately was overcome by a
massive brain fart and completely forgot that it is an inline element.
Hopefully ten minutes or so of self flagellation will help make amends
for my incredible spells of senile stupidity. 
coothead
2 Likes
[off-topic]
I recommend wet spaghetti.
{/off-topic]
1 Like
No, I think you have valid points and it just depends which sources you cite as there seems to be differing opinions about this.
It’s not a big deal in the scheme of things:)
If you need the span then no need for the break as you can set the span to display:block to give you your 2 lines. Come to think of it the break would actually be inappropriate here because your name does not need two lines to convey its meaning. Its only the visual representation on the screen that shows it in two lines so we don’t need the break element at all for semantics.
In some cases such, as this post question, then no it doesn’t really matter and the odd div or span here and there won’t make much difference. In other cases it may matter a lot if you misuse headings and phrase elements.
(Historically though old versions of IE use to ‘baulk’ when inline and block elements ran into each other in complicated layouts but thankfully those days are over (haslayout hasgone).)
The html structure of a page should convey the information using the most semantic tags available so that valued meaning can be drawn from the document for screen readers, bots and accessibility. Not everyone reads a webpage by looking at the screen.
Its fun to discuss the finer points but its no big deal to get the odd tag here and there out of context as long as you are taking care elsewhere. There are many times when I’m not sure if the data is a list, a dl list or maybe tabular but as long as we try our best then I think that’s good enough.
Sometimes there just is no right way (or doesn’t appear to be) and people will argue for days 
2 Likes
You beat me. I left school 48 years ago when I was 15
1 Like
That works very nicely, thanks. That seems to be the cleanest solution so far.
I left, or it may have been I was expelled from, school 55 years ago at
the tender age of 17.
Either way I was unaware of my congenital stupidity. Over the years
though, things improved and eventually my awareness became much
keener and revealed my innate stupidity. Happily, in my late forties, I
read a quote, allegedly attributed to Einstein…
“Two things are infinite: the universe and human stupidity;
and I’m not sure about the universe”
That removed the beam from my eye, explained all the ills in the world
including the enigmatic Tronald Dump. 
coothead
1 Like
That’s what I was getting at before. Whether the <br> tag creates some kind of semantic divide between the two words that belong together, or if it’s just a purely display/layout thing with no semantic effect. I’m interested because I’ve also been working on a concept design where I want line breaks in the <h1>, I thought nothing of using <br> for that, assuming that’s exactly what it’s for.
It’s fine if you are confident that you know all there is to know about semantics. But if anyone is unsure about something, it’s good to ask or get a second opinion. That’s what the forums are for.
It is easy to get bogged down in minor details that will have little impact, but we still need to learn which are the major and minor details to make that distinction. Plus it’s nice to have code that is just right.
4 Likes
Like others have said, for me, this is very much am learning exercise. I’m on no strict timescale, and see this more as a test piece. Whilst it’s readily apparent I’d had no problem achieving the visual effect I’d wanted, the mark-up looked clumsy to me - I like simple, less verbose code, as it’s easier to read. To me, this feels a better solution to me.
<h1>
<span class="firstname">CHRIS</span><span class="surname">PERRY</span>
</h1>
along with
span {
display: block;
}
2 Likes