CODEWITHSUNDEEP
htmlcsssemantic-markup
Cheetah
Cheetah

Reputation: 14379

Should I use a <p> tag or <div> tag here?

I feel rather silly actually asking this question as I am sure it will simply be opinion rather than correctness that will prevail.

But I have a "button" which is fixed to the lower right hand side of the screen which the user can click on to open the chat box.

Currently I just have this:

<div id="chatbtn">Sales help online</div>

I chose a <div> tag so that search engines don't think its a main text element. Should I have chosen a <p> tag to be semantically correct here?...or maybe even an <input type="button">

What do you think?

Upvotes: 4

Views: 1272

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

For the button itself, you can use input type=button if there is nothing special in it (as here), or button type=button if you need richer formatting (e.g., an image or a line break inside the button).

As a wrapper element outside it, use div if the button just needs to appear on a line of its own, p if you additionally wish to have empty space above and below (in default non-CSS rendering). There is no real semantic difference between these elements; in HTML specifications and usage, p means a paragraph in a loose sense only (see e.g. the HTML5 description of p).

In either case, since the button is presumably JavaScript-driven and does not do anything when JavaScript is disabled, it would be better to generate the element (and perhaps the enclosing element as well) dynamically in JavaScript, instead of having it as a static part of the HTML document.

Upvotes: 0

Zeta
Zeta

Reputation: 105876

Always try to use the semantic correct element. If you wish to create a button, use the <button> element. If you wish to display a paragraph, use <p>. If you want to group elements in a container without semantic information provided to this container, use <div>.

Upvotes: 2

Shadow Wizard
Shadow Wizard

Reputation: 66389

Button has its own tag actually:

<button type="button" id="chatbtn">Sales help online</button>

Default type is sometimes submit so best practice is to always say "it's ordinary button, not submit".

If you need to treat it as block element you can either place it inside containing <div> or manually change its style to display: block;.

Referring something you said, <input type="button"> is surely not proper in your case, as it's form element and you don't have any form here thus the "pure" button tag is more proper.

Upvotes: 4

Related Questions