CODEWITHSUNDEEP
htmlsemantic-markup
Amit Erandole
Amit Erandole

Reputation: 12281

HTML5 for marking up functionality - what semantic tags should I use?

When it comes to writing blog markup, I absolutely understand the use of article and section tags. But my masthead sections have two widgets. One has a search engine embedded and the other is marketing copy leading to an FAQ page.

What would be the correct HTML5 markup in this case? How do I mark up widget functionality?

Upvotes: 2

Views: 290

Answers (2)

Paul D. Waite
Paul D. Waite

Reputation: 98926

my masthead sections have two widgets. One has a search engine embedded...

A search engine embedded? Do you mean a search field, i.e. a text field into which you can type search terms? For that, you want <input type="search">.

...and the other is marketing copy leading to an FAQ page.

Does this really qualify as a “widget”? If it’s marketing copy “leading” to an FAQ page, that just sounds like a link to me, which has been semantically represented in HTML since version 1 with the <a> element.

HTML is pretty simple, you really don’t want to over-think it. You don’t need specific tags for everything people could possibly give a name to. (What exactly is a “widget”? Isn’t it just a section of the page?) For most things, <section> is fine.

Upvotes: 1

DA.
DA.

Reputation: 40697

While HTML5 is a big improvement, there's one thing it doesn't fix: The subjectivity of what is considered proper semantics for every situation.

And, I doubt HTML will ever fix that.

If you're already using HTML5 containers for other more obvious parts of the page, I wouldn't sweat these too elements much. You could put the marketing stuff in an aside. Search could be considered a form of nav. But...I don't think bad karma will come your way if you just stick them in a couple of divs, either. ;)

Upvotes: 0

Related Questions