CODEWITHSUNDEEP
htmlsemantic-markup
user1360618
user1360618

Reputation:

Proper use of HTML5 semantic tags

I'm struggling with appropriately applying semantic tags to a website showing a catalogue of antiquities.

The first question is about the main structure:

body
  header
    h1
    h2
    nav
      a
      ...
      a
  main
    div        // Search field and a button to open a spacious filter pane
    article
    article
    article
    ...
    article
    div        // Pagination
  footer
    p

Is it correct to put the two divs with search and filter options and the pagination into the main tag? Or should they be independent in the body tag before and after main?

The second question is about the articles in the above structure:

    article
      figure
        img     // depicts the antiquity
      figcaption
        header
          h3    // title of the antiquity
          p     // detailed description of the antiquity
        section
          p     // first owner of the antiquity
          p     // second owner of the antiquity
          ...
          p     // last and therfore current owner of the antiquity
        section
          p     // first literature record on this antiquity
          p     // second literature record on this antiquity
          ...
          p     // last literature record on this antiquity

I'm pretty sure from looking at other questions and answers that it is correct that section can be used within article that way. What I'm totally insecure about is to put the complete antiquity entry text into figcaption.

Upvotes: 2

Views: 231

Answers (1)

Martin
Martin

Reputation: 1226

It is perfectly fine to use a div for the search.

You can use a nav element for the pagination: https://developer.mozilla.org/en/docs/Web/HTML/Element/nav

As for the structure of the article element. A fig caption should be the first or last child of figure, see here for more details: https://developer.mozilla.org/en/docs/Web/HTML/Element/figure
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

So I would suggest making you article look more like:

article
  figure
    img     // depicts the antiquity
    figcaption  //text about the image
  header
    h1    // title of the antiquity
    p     // detailed description of the antiquity
  section
    p     // first owner of the antiquity
    p     // second owner of the antiquity
    ...
    p     // last and therefore current owner of the antiquity
  section
    p     // first literature record on this antiquity
    p     // second literature record on this antiquity
    ...
    p     // last literature record on this antiquity

While having the correct markup is preferred, I don't believe you will be punished for getting it wrong.

Upvotes: 1

Related Questions