HTML element aside from headers <h1><h2>, ect

Question

Hi! I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)

Answer 1

You can use P and DIV tags over and over. If you need to, style them to look like H1's.

p.title {
  font-size:18px;
  font-weight:bold;
}
p.header2 {
  background: url("bg.jpg");
}

--

<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>

<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>

Answer 2

<span> is a useful addition, as well.

Answer 3

You can make a <p> look however you like, for example:

<p class="header">This is a header</p>

with

p.header { font-size: 200%; font-weight: bold; }

but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:

<h3>This is a header</h3>

you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.

This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.

Answer 4

Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?

Answer 5

<span> <strong> and <em> are others you can use inside your <p> tags.

Answer 6

You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.

Answer 7

i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element

for example

<div id="text">Text Here</div>

<span class="red">This would be red</span>

<div class="red big">This would be big and red</div>

with css

#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }

hope this helps

Answer 8

You can use multiple h1's or h2's and just target them like this:

<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>

#header h1{ color:red;}
#main h1{ color:blue;}

It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.