A question of Semantics

I have been trying to put into practice Paul’s lesson on semantics and have completed my page header.

It has left me with two queries though that I am unable to solve. Perhaps I am being too literal to the instructions.

Web Page: http://www.c5d.co.uk/kimmeridge1911.php

Line 179/80 If I change the p to a span as I believe is right in a table the number 3 or 4 does not centre. Why?

     <td><p class="statscenter">3</p></td>
     <td><p class="statscenter">4</p></td>

Question 2. Line 151 says that I can’t have a list in a span, so I have had to use a p tag. Is that correct or should it have been differently?

Anything else that you spot would be welcomed.

Finally, please ignore the HTML validation errors from l468. This will be typed over all of them once I am happy with it.

Hi there certificates,

  1. I cannot imagine the p element as being semantically correct. :winky:

    It’s contents bear no resemblance to a paragraph. :wonky:

  2. why do think that ol element or an ul element requires a container?

coothead

Because I want to centre the block of text, but align the text to the left of the block or the text centres. If I don’t put it in a block everything goes to the left of the cell. The image is how I want it to look

What is right and what is wrong semantically really depends on context. <p> means Paragraph, so if you have a paragraph of text in your table, p may be the right choice.
<span> is a generic container with no semantic meaning, just like <div>, only div is the block version and span the in-line version.
Really the data looks as if it does not need any extra wrapper, a number within td tags is fine. Though using span that is effectively what you have, as span has no meaning, it’s just the code will be less verbose without it, you can apply any class you need for styling to the td.

The difference between p and span is that p is a block and span is in-line. Giving the property of text-align: center to an in-line element won’t work because that applies to the content, not the element itself which is aligned by the properties of its parent.

A list is a block, a span is in-line. You can’t have a block element within an in-line one. The exception being an <a> in html5 which can now contain blocks.

No, if you really do need a wrapper a generic div may be better (again depending on context), but in many cases you could apply any class you need directly to the list element.

2 Likes

Hi there certificates,

I would code lines #179 t0 #196 like this…

  <tr class="foo">
  <td colspan="2">1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
     <td>7</td>
     <td>8</td>
     <td>9</td>
     <td>10</td>
     <td>11</td>
     <td>12</td>
     <td>13</td>
     <td>14</td>
     <td>15</td>
     <td>16</td>
  </tr>

…with this CSS…

.foo td {
    text-align: center;
 }

Obviously, “foo” can be changed to something more appropriate. :winky:

coothead

1 Like

Thank you for that. It would seem to do what is required. Have looked at it for so long, I’d couldn’t see any way forward.

You can just centre the td content instead.

  <td  class="statscenter">3</td>
  <td  class="statscenter">4</td>

The reason the span won’t centre is because spans are inline elements and are only content width so there is in fact nothing to centre. A block element expands to the full available width which is why text-align:center will centre the text content. You could use a span and set it to display:block and then it would work. However you don’t need the span or the p because the td can be used to center the text,

Remember tables are semantic when used for tabular data so table headings should really be in th tags and not td tags.

There is no need to add other tags to tabular data unless for extra stylistic purposes (or where you have more complicated content to structure).

Edit: Too slow others already answered much the same:)

1 Like

Thanks for the explanation.

The image in my response to Coothead show what I am trying to do. I don’t think I could style a list to centre the block and align the text to the left of the block. Well I couldn’t anyway!

Thank you as always

Your response matches what Coothead & SamA74 have said, though I did not think of it having wondered why it wouldn’t work for so long.

As you will see I have styled other bits of the table so I know what I’m doing there.

Thanks for the tip about the header too

I think you could simplify your code a bit and at the same time make it a little more consistent by removing the “block” spans and give the list and the paragraph a max-width so you don’t need the spans to control the line lengths.

E.g. for the code that is your posted image:

        <td rowspan="3">
            <ol class="residents">
                <li class="birthplace">If born in the United King&#45; dom&#44; write the name of the County&#44; and Town or Parish&#46;</li>
                <li class="birthplace">If born in any other part of the British Empire&#45; write the name of the Dependency&#44; Colony&#44; etc&#46;&#44; and of the Province or State&#46;</li>
                <li class="birthplace">If born in a Foreign Country&#44; write the name of the Country&#46;</li>
                <li class="birthplace">If born at sea&#44; write &ldquo;At Sea&rdquo;&#46;</li>
            </ol>
            <p>NOTE&#46; &mdash; In the case of persons born elsewhere than in England or Wales&#58; state whether &ldquo;Resident&rdquo; or &ldquo;Visitor&rdquo; in this Country&#46;</p>
        </td>
.residents {
    margin: auto;
    padding: 0;
    max-width: 190px;
    list-style: none;
    counter-reset: section;
    line-height: 1.2;
    text-align: left;
    font-size: small;
}
.residents li:before {
    counter-increment: section;
    content: "("counter(section)")";
    margin-right: 5px;
}
.residents li.birthplace {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px; /* same length as the text-indent */
    text-indent: -20px;
    white-space: normal;
}
.residents+p {
    margin: 1em auto 0;
    max-width: 190px;
    text-align: left;
    white-space: normal;
    font-size: small;
}

The code above gives this display:

1 Like

Thanks for the replay and I am sorry for the delayed acknowledgement but have out this evening.

I shall try it out first thing in the morning.

The birthplace class does control the other three lists though, so it may need tweaking a bit.

Kind regards

Yes, the “block” spans could be omitted in all those lists and paragraphs with the same example css.

I fear I have gone awry;but just slightly

The CSS and HTML you gave me works fine. but in the column which begins

(1)State whether:— “British sub-ject by parent-age.”

(The second from the right) The (1) should be next to British and there should be a margin top.

I can’t see why there isn’t in just this one column

I guess you have edit the html since posting, that’s ok.
Now the text is on on its own before the list. (I think that’s not semantic either.)

I suggest you wrap that text as a paragraph and give it the same class as the list:

      <td rowspan="3">State whether&#58;&mdash;
	            <ol class="residents">

Add the p tag with the class:

      <td rowspan="3"><p class="residents">State whether&#58;&mdash;</p>
	            <ol class="residents">

I think the css can be just as it is, and the paragraph will fit in.

Thanks.

This solves the number difficulty but not the layout.

I have uploaded the page and you see that if I put the spans back in the width is right, but the alignment of the block wrong.

If I don’t put the spans in it looks like the column next to it. with the breaks in the wrong place.

I did try and see f there was a width on the paragraph but couldn’t spot one though 190px seems to be in the CSS as a maxwidth.

One to look at again. I cannot respond further today but thanks for looking.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.