Should I use the figure element?

HTML & CSS
1

I am working on a simple webpage that has a mast with a logo and a < nav > menu bar.

Then in the body, I will have a single table.

When I mocked up the table - separate from my page template - I just created a < div > with a #wrapper class.

I am wondering if using a < figure > element makes sense here?

(Or maybe a < section > element?)

Thoughts?

2

Read the usage notes for The Figure with Optional Caption element
If it meets that criteria then take advantage of it.

Usage notes

  • Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
  • A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child). The first <figcaption> element found in the figure is presented as the figure’s caption.

If your using an HTML5 doctype … <!doctype html>
Then bring yourself up to date on all the new elements available to you as they add semantic meaning to your document.

Sections and outlines in HTML5

1 Like
3

@Ray.H,

Yes, I read that this weekend, but HTML5 is somewhat confusing…

I guess a < table . isn’t the same as a graph that is an image, and thus could be a < figure >, right?

It just seemed like a < figure > might be semantically correct, because in a book you could see a Figure 1 that is a table, right?

If I shouldn’t use a < figure > for my table, then should it be a < section > since the table is all of the content of the web page minus the mast?

(I have heard people grumble about some of the design choices in HTML 5 and I agree!)

4

If that is the case and you feel the need to enclose
it within an element then I would suggest you look
no further than the…

main element :biggrin:

coothead

1 Like
5

@coothead,

HTML5 is so confusing sometimes…

For staretrs, what exactly does this mean…

6

Well, this…

…which, in your case is your <table>. :winky:

coothead

7

Right, but that doesn’t answer my last question and what I quoted from MDN… :wink:

8

For instance, what does this mean…

I have heard of the “DOM Tree” before, but haven’t studied it as I can only learn so many things at once?!

To me, that description almost sounds like how absolute positioning works where something is removed from the document. But, of course, that wouldn’t make sense here - or would it?

That is what is confusing to me…

9

Look at the final sentence of the quote…

…or did you overlook it?

coothead

10

Um, I did spend most of my weekend at MDN reading up on things, but they aren’t alays clear.

Informative to who?

The reader?

The browser?

Does “informative” really mean “not really informative at all, because the browser doesn’t recognize it semantically”?

I dunno…

11

Your right, it doesn’t make sense. Absolute positioning relates to CSS styling, not HTML semantics.

I could have an <h1> heading that would be an important part of the document outline. Then I could style that with CSS absolute positioning to remove it from the normal page flow (that just means it won’t push on other elements like blocks normally do).

But it did not loose any semantic value because it is still a vital part of the document due to the semantic weight of an <h1> tag.

12

@Ray.H,

Then what does this mean?

Is < main > treated like other semantic elements (e.g. H1, H2, UL, etc) or not?

Or is it just a cosmetic element like the < DIV > and just used as a “hook” for styling?

13

The specs are saying it’s not part of the document outline so the answer is no.

But it has more meaning than just a generic element like a div or span.

Read the definition of it from W3C
The main element (click that link and read it ALL)

The main element represents the main content of the body of a document or application.

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or application’s main function is that of a search form).

Authors must not include the main element as a descendant of an article , aside , footer , header or nav element.

2 Likes
14

It’s not saying that elements nested within the main are not part of the outline. It’s just not recognizing the main tag itself as part of the pages outline.

There could be an h1 tag within the main which would definitely be recognized as part of the document outline.

1 Like
15

@Ray.H,

First off, thanks for helping me to see that sometimes I would be better going to w3.org versus using MDN - lots lore detail and examples there!! :+1:

It seems like there is a lot of overlap with new elements in HTML5 and older ones.

But after reading all of the w3.org link you provided, it seems like a good way to semantically structure web pages would be…

<header>
	<h1>branding</h1>
	<nav></nav>
</header>

<main>
	<h2>content title</h2>
	<p>main content here...</p>

	<section>Or some content here...</section>

	<section>And then some more content here...</section>
</main>

<footer>
</footer>

Does that sound correct?

16

So which elements show up in the “outline”? Is it just H1 - H6? Or are there others?

And so it sounds like the <main></main> element is used to help organize content similar to <nav></nav> and <section></section> more than being a hook for styling like a <div></div>, right?

17

It looks like a good start for YOUR page indeed.
Not all sites will be the same so you build your page according to the content’s needs.

When you validate your page just check “outline” and it will give you the page outline at the end of the results. That will show you which elements get included. I know all headings get shown, not sure about others.

2 Likes
18

@Ray.H,

For my situation, where I have a single table on a web page, do you think using the < main> element makes sense? (It was @coothead’s idea?!)

Or should I just drop my < table > in the < body . and leave it at that?

My end-goal is just to help increase the chances that search engines give me the most credit for my content!

19

As you’ve learned in this thread the main element is not going to earn any brownie points with google.

The best way to do that is to just build properly coded pages and keep the HTML as semantic as possible.

I like to keep the pages on a site following the same general template. Though some pages may deviate a little based on their content.

It’s not going to hurt to have your table in the main tag, especially if it is the main content on that page.

Your probably going to need your table in a wrapper of some sort (div or main). In your other thread I used a wrapping div so the table would scroll on small screens. It was overflowing the page wrapper and causing you to have to scroll the page wrapper. In doing that you could see the table hanging out past the page wrapper’s border.

That’s why I used overflow-x:auto on the table wrapper. So it would scroll on it’s own within the page wrapper.

20

Since it helps organize content - and thus help Google crawl web pages - I actually figured you would get “brownie points” from Google.

In other words, use old-school HTML elements?

But above you made it sound like I’d get no extra credit from search engines? :confused:

Yes, I have a wrapper around my table so I can center it more easily.

Hmmm… That is another question I have. In my finished web page that includes my table - lots of modifications since we last spoke - I see a buff-colored bubble in Firefox’s Develoepr Tools that says “overflow” next to < body >.

I have been using the Responsive Tool, and I am happy with how things look, but I guess I have an error/issue somewhere, but am unable to track it down…