Footer Semantics
From a POV of semantics should h tags and p tags be used in footer? If this is correct what other tags should be avoided?
If we look at page as a table of contents I feel like headings and paragraphs have no place in footer (or header) since they are not part of the content of a page. They help navigate content. Thus i feel like using span for h and p more relevant.
Am I wrong?
11 Replies
For
p, all it designates is that something is a paragraph of text. If your footer contains a paragraph of text, it should be in a p tag. The MDN article even shows a p inside a footer as an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
I'd say having an h1-6 tag in there wouldn't make a lot of sense, considering the role of the footer tagTo dig a bit deeper, the official HTML spec says this about paragraphs:
A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.–https://html.spec.whatwg.org/multipage/dom.html#paragraph So as long as your text meets that criteria then it belongs in a paragraph! As for headings, if you really think that your footer should appear in the "Table of Contents" of the page then yes…but usually those headings are reserved for the
main content and the footer "…typically contains information about the author of the section, copyright data or links to related documents." (–https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer#specifications). None of which normally require a heading element. That's not to say that you can't, but you should really think hard if you should.Okay.
How will it impact SEO if I use span for a line of text like copyright 2022 or designed developed by john doe instead of using p tags.
Basically currently i use spans instead of p and h tags. For little text i have in footer. And ul/li for nav ofc.
you shouldn't use spans for p's and h's because of accessibility
Span is an inline element and shouldn’t be used for block-level content. This is exactly what the paragraph element is for. Forget SEO, span isn’t semantic.
Im not saying to use span as a replacement of p and h. Im using p and h in my main element.
Im talking of footer (of the page not section or article) only. As you said there is no point of placing heading in footer.
That was my reasoning of putting it there. There is no semantic meaning of that. For example copyright text that is found is there for legal purposes but doesnt contribute to page
"no point in placing heading in footer" means "don't put content that would require an h-tag in a footer", not "if you have content that goes in an h-tag put it in a span if you're in a footer"
not to mention that if you're using it for block level content, you should use a div not a span... but that's only for when there's not a semantically appropriate alternative
Agreed. If it's the copywrite or whatever, just use a
<p>, or <div> worst case, but <p> is fine.
Don't worry about SEO. Google's algorithm has moved way past using heading levels to figure out the content of a page. Most SEO info out there these days is very dated, and just part of a circle of repeating what people learned in the past.
There is an entire SEO industry that's basically built on information from the early 2000s. It's not that some of that stuff doesn't count, but it's the last 2% of the equation that takes a lot more than 2% of your time.
Create the content for the user, using the correct semantic HTML. If the content is good and what the user is looking for, then you'll be fine from that stand point.
Most SEO these days is about making really high-quality and sharable content.I see. Thank you. That resolves my dilemma then.
You seem to be under the mistaken assumption that the
p tag is a main-only element, and that's not true at all. p doesn't have to contain content about the main part of the page, it's a block-level element used to separate content. It's for "…general thematic grouping…." Copyright is a thematic group.
span tags, on the other hand, are inline-level elements that have no meaning and are basically div tags but inline. It's for times when you want certain words (or other inline level things) to have different visual stylings. For example, books titles may bold in small-caps, so you create a .book-title class that's added to a span whenever you need to style the title of a book. Or if you want to have specific quotation markers and don't want to use the q element: make a class that gives ::before and ::after with the correct visually-styled quote marks and add it to the span of your quotation.Yes. You are right. I didnt understand p and span well. Thx