Semantic Structure for a Name When Split Across Two Lines

HTML & CSS
, ,
21

Just to toss my offering into the pot, I’ve used this structure many times. (Mine is beneath Chris’)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/semantic-structure-for-a-name-when-split-across-two-lines/215967
chrisofarabia
Feb 20,2016 9:39 AM
-->
    <style type="text/css">
h1 {
    display:inline-block;
    text-align:center;
    outline:1px dashed magenta;  /* TEST Outline */
}
span {display:block;}
.firstname {color:red;}
.surname {
    color:blue;
    font-size:.75em;
}
    </style>
</head>
<body>

<h1>
  <span class="firstname">CHRIS</span><span class="surname">PERRY</span>
</h1>

<h1 class="firstname">CHRIS<span class="surname">PERRY</span></h1>

</body>
</html>

There was some discussion a couple of years ago in which it was considered that screen readers did not necessarily recognize a <br> tag as a space or break between words… ie. the words would run together (I think that was the gist of it). I don’t know what became of that screen reader behavior. Guess they became smarter?

4 Likes
22

I’ve not heard of that one. But now you mention it, the example doesn’t have a space between the words. Ignoring the css, that html spells out “CHRISPERRY” one word.
Another note about screen readers. It was mentioned in another thread that some screen readers read words in capitals as initials, like an acronym. So you should type “Chris Perry” and capitalise using css:-

h1 { text-transform: uppercase; }
3 Likes
23

That’s the sort of thing I came here to learn.

1 Like
24

If you mean headings, they’re block level.

Yeah, but I’m not sure it works to equate that version of a paragraph with an HTML <p> element.

25

I’m pretty sure it doesn’t.

26

Am I missing something, but wouldn’t a space before the <br> sort that out?

2 Likes
27

Much what I was thinking, though the <br> has now been removed in favour of the display: block; on the span tags.

28

But I still think you want a space between the spans to separate the words.

<h1><span class="firstname">Chris</span><span class="lastname">Perry</span></h1>

Reads as:-

ChrisPerry

<h1><span class="firstname">Chris</span> <span class="lastname">Perry</span></h1>

Reads as:-

Chris Perry

3 Likes
29

That’s what I meant (and have just done) - I’d not made that clear. I’ve just modified it a little like so…

<h1 class="vcard">
  <span class="fn">
    <span class="firstname">Chris</span> <span class="surname">Perry</span>
  </span>
</h1>
30

Is there a reason why you need the extra <span class="fn">, rather than just attaching that class to the h1?

1 Like
31

Yes, or in the case of spans, a space between spans as @SamA74 mentioned. The point is that many coders don’t realize that.

2 Likes
32

Only because from what I can make out, the ‘vcard’ microformat works in conjunction with the ‘fn’, and to get the ‘fn’ to apply to both firstname and surname, that was what I came up with.

At this point I’m expanding the discussion out a little from the original question, but it seems very much related.

1 Like
33

Ah, OK. I hadn’t realised that’s what you were doing. (Moving goalposts. )

I asked because not everybody seems to know you can add more than one class to an element.

3 Likes
34

as if?

2 Likes
35

Ah, also. I had wondered why you had to use two spans.

36

I guess you could equally put a span with a vcard class on it, around the H1 , then add the fn class to the H1 itself. I can’t see it would make any great difference to the meaning - either seems to achieve the same end (whatever that is at this point)

37

It would need to be a div, rather than a span, as the h1 is a block level element.

That’s probably the way I would do it, as it seems to make more logical sense to me, but that’s not to say it’s any better than the other way.

2 Likes
38

Good point.

39

Not so fast. Whilst the page without the microformat works fine on IE11, adding it blows the layout completely to the point where the ‘main’ content area no longer honours the max-width 960px. It works fine in Chrome and Firefox. Anyway, time for tea here…

Edit: Hold on that, just checking something…

40

Fixed it. The proper version uses both a normalize.css and a base main.css (from the HTML5boilerplate) file, which weren’t available in the Codepen. One of them has the effect of making the <main> tag usable in IE11, which doesn’t otherwise work in the Codepen.

For the purposes of the Codepen, I’ve swapped out the <main> tag for <div class="main">

v2 here

1 Like