CODEWITHSUNDEEP
htmlxhtml
Ray
Ray

Reputation: 6115

documenting div sections, use title attribute?

I'm looking for the most terse way to document sections of my page, e.g. div sections.

Anything wrong with using the title attribute, e.g.

<div title="Payment Area" class="form">
   ...
</div>

?

P.S. In case relevant, I'm using the IntelliJ IDE, but new to its various capabilities, e.g. automatic formatting control and other ways to be able to easily understand sections of my pages.

Upvotes: 17

Views: 64669

Answers (5)

Jason Gennaro
Jason Gennaro

Reputation: 34855

I would probably use ids, that way you can also use them as hooks for your CSS and JavaScript.

Otherwise, Gabe's Answer makes a good case for data attributes. John Resig explains why they are good here: http://ejohn.org/blog/html-5-data-attributes/

Upvotes: 5

s4y
s4y

Reputation: 51715

If an element has a title attribute, most browsers show a tooltip with the attribute’s value when you hover over it. In this case, they’ll show a “Payment Area” tooltip when you hover anywhere over that div.

HTML attributes, in general, have a purpose. HTML has comments for documentation! Try them:

<div class="form"> <!-- Payment Area -->
    ...
</div>

You mentioned that you didn't want the overhead of comments. If you count up the characters (including the required space before the attribute, they're actually the same length:

 title="Payment Area"
<!-- Payment Area -->

(But, I agree, they do look bigger!)

Upvotes: 19

Reina
Reina

Reputation: 315

You can use the rel="" attribute, that works pretty well for me, I don't think title works on divs

<div rel="Payment Area"></div>

Upvotes: -1

Philip Schweiger
Philip Schweiger

Reputation: 2734

The title attribute isn't meant for divs - I haven't checked the official specs, but I don't think it's even a supported attribute. The better practice is to use the "id" attribute. This has the added benefit of providing hooks for your CSS.

You can also take it a step further and use html5, which provides you with more descriptive elements such as <nav>, <section>, <article> and <header>

Edit: as per comment by steveax, the title attribute isn't invalid. I think the gist of my answer remains valid, though.

Upvotes: 1

Gabe
Gabe

Reputation: 50503

I would recommend using the HTML5 custom attributes standard:

<div data-title='Payment Area'></div>

Basically, precede the name with data- and the browser will ignore it.

Upvotes: 4

Related Questions