English 中文(简体)
HTML element aside from headers <h1><h2>, ect
原标题:

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. =)

最佳回答

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.

问题回答

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.

<span> is a useful addition, as well.

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>

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

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

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

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.





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签