This question already has answers here:
Is it alright to use multiple h1 tags on the same page, but style them differently? [closed]
(15 answers)
Closed 8 years ago.
Here I am again, asking the same question I asked a few months ago. But no, I don't believe this is a duplicate, because there are so many contradicting answers on this that I find it difficult to determine the correct one.
seroundtable.com says,
H1 tags should be used for what they were originally created for: organizing your documents to stress the key points.
That being said, it would be illogical for search engines to not think that a h2 is of lesser importance than a h1.
ehow.com says this,
it is recommended that a page should always have an H1 element, but only one. The H1 tag should include the main keywords targeted within the page.
So that right there contradicts an answer provided to me on S/O a few months ago. The answer that was provided went along the lines of, 'You can have as many h1 tags as you like' (I was asking a question about how to use them when I need more than 6).
So now I am confused.
I believe that by using many h1's sends a less-than-clear message to the viewer and search engines. But I also feel dirty making a p tag 28px;
What should I do? The issue here is, this is a unique design, and all 5 main navigation links are spread horizontally and are all the same size. I want to use a h1 for them all, I do not want to use h1, h2, h3, because all links - in this case - are of equal value. What I mean is, you wouldn't dare try to pass one page off as less important than the other.
you can have as many h1 tags as you want in a page (w3c specs).
in your case however i would recommend using a list or for the navigation menu (wrapped in a nav element if you're using html5). The links to other pages aren't headings or the most important elements on your page.
you should reserve using h1-6 for actual headings.
You should look into using an HTML list. It seems like you are questioning what HTML element is most semantically correct, and from my experience the most semantically correct way to do navigation is using a list.
But other popular developers like Chris Coyer the author of CSS-TRICKs says he uses listless navigation. Navigation in lists to be or not to be.
If your site is going to used by lots of people, using a list will help those with disabilities and use screen readers to consume your website.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
My site has a very nice, clean, html5 semantic structure.
But here and there, I have sections that don't have any h2 tags because they are not worthy. For example, a box containing the progress bar for a networking tool. It does deserve its own separate section, but it absolutely does not need a header.
But the validator and other sites suggest all section tags need an h2 header. Given that, should I add display: none h2 headers to the few header-less section tags I have?
On the one hand, hidden content for the sake of making 'validators' and search engines happy seems like bad practice. If it's not worthy of being on your page, don't put it on your page.
On the other hand, I can see a situation where someone is using a text-only browser or some kind of visually impaired screen reader (that we always hear about in HTML docs but I've never heard of in real life). In that situation, you might not know what the progress bar even is. Looking at it's source code does not make it's function clear. But looking at it graphically rendered makes it 100% clear. So in that case, an h2 tag that says "Progress Bar" would be useful to have in the source, while being invisible on the normally rendered page.
I think the problem starts with misusing <section> tag.
Per MDN:
The HTML element represents a standalone section — which doesn't have a more specific semantic element to represent it
A common misuse is using section as a devision element (using it as a wrapper) when really you could use a simple div.
Usage notes of <section>:
Each should be identified, typically by including a heading (- element) as a child of the element.
And
Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
About not worthy of headers sections,
maybe a simple div to wrap progress bar elements can solve your problem .
With all that been said, MDN's states about <section>:
— contained within an HTML document. Typically, but not always, sections have a heading.
Which means it's not "bad HTML" ...
More: The Generic Section element
About accessibility, there are other ways to interact with users. (titles for elements, alternative text and more...)
I personlly don't think you need to add element tags if they don't have any usage , it pollutes the page.
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Difference between id and class [duplicate]
(2 answers)
Closed 7 years ago.
I'm new to CSS, and after learning about ID selectors, the only difference between them and class selectors is the fact you can only have one specific id per element, whereas multiple elements can share the same class name. But then it's easy: name an element a class name that you won't use for any other element. So it seems in that sense, a class can be treated as an I.D.
I'm new to CSS, so I may be missing something here. What advantage do I get using an ID selector over a class selector in a particular case?
Thanks.
Here are a few reasons that come to mind:
Direct Linking.
You can link directly to a specific element on the page by adding the id to the end of the url. See this post for examples: Link to an element within the current page
Javascript Compatibility.
A lot of JS libraries utilize the differences between classes and IDs. For example, they will treat classes as an array of elements, assuming you want to iterate over all of the instances of that class. IDs on the other hand are assumed to be singular, and whatever functionality you are trying to achieve will look for only a single instance. This has minor (almost unnoticeable) performance benefits, but can also break many functions if not used correctly.
Specificity.
When targeting elements on a page, specificity always comes into play. Since IDs and classes have different weights, using them incorrectly can cause problems when you are trying to keep styles from over-writing each other. See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Browser Compatability.
While browsers are getting better at conforming to modern CSS standards, there are always going to be quirks. Not every selector works in every browser and some CSS tricks may break when your users visit your site using an old version of IE or some random build of Safari. That being said, IDs will always work, no matter what. This may not relate to your specific case, but could help prevent headaches down the road.
Best Practices/Readability.
Most importantly IMO, is the readability aspect. When looking over another developer's code, I assume when I see a class being specified in the CSS that whatever styles they have set will affect multiple areas of the page. This means I shouldn't just go changing things without further research. Opposite of that, if I see an ID being used, I can assume that any changes to that particular style will affect only that one area, and there shouldn't be any surprises for me down the road.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS 3 content selector?
I was wondering, is it possible to select an element based on its content with CSS?
I realize I can use something like this:
.this[href="./foo.php"] {
/* And the styles... */
}
But is there a way to select based on inner content?
So if I have this:
<p>[ Continued ]</p>
How can I select it based on it's content, [ Continued ], if I can?
No, not with CSS, and there really should never be a need too. If you're making a "Continued" button, link, or whatever: specify a class, maybe an ID, or even use an attribute, and select it. There really is no need for a content selector with how many options you already have.
Not to mention, not adding a class or some kind of identification to this link makes it look like regular text within the document, possibly removing some of its semantic meaning. Giving it a separate class makes it stand out. If I give a link the class "button," that makes it stand out from the rest of the links on the page, saying "I'm a button, not just an ordinary link." Selecting based on the content does nothing of the sort; it's just another link.
What is the best practice for developing a layout? Is better to limit divs? I was looking through the html/css of some popular sites and they all seem to have divs within divs. For instance, a div for the entire page, a div for the topbar, a div within the top bar for the logo, search bar, etc.
Is this a good practice? I suppose it's easier to position all the divs correctly and than place the necessary elements within the divs. It's what I've been doing this far but want to make sure I'm learning the correct approach.
Any help on this is appreciated. Thanks!
Use <div>s when you need to divide (that's what divs are supposed to be used for) sections of your page from one another. Header/footer from content for instance, or individual posts on a blog.
However, you shouldn't use them when semantically another element would make sense.
If the archive on the previously mentioned blog only showed a two line summary of every post in the archive, an ordered list might make more sense as you are defining a list of items which are in order. <li> elements are block elements as well and can be styled in exactly the same way.
Sometimes, it will make sense to have nested <div> tags, and sometimes you shouldn't.
As a basic test, imagine your page is being parsed by a reader for a visually impaired user. It needs to know what is in each node of the document so it can announce it properly. It doesn't care what your visual CSS needs are, it just wants to parse it into speech as accurately as possible.
Basic points to remember:
Write your HTML primarily for structure not visuals
The person viewing your website may not be using your CSS
The person viewing your website may not be using a conventional web browser
You can always tweak your structure if the CSS doesn't quite work, providing it remains the same semantically.
A <div> by definition is a meaningless element, so it doesn't matter how many of them you have.
However, you need to have <div>s on your page as long as they make sense, and to not use them if there are elements better suited for the job (semantically).
<div>This is a paragraph of text</div>
should actually be
<p>This is a paragraph of text</p>
And such.
There is a name for this sort of "code smell" in HTML: Divitis.
You should expand you knowledge about the semantic meanings for the tags in HTML. You could start by reading this article, but it is more focused on html4.01 and xhtml. There are several new tags in HTML5 and few changes in semantic meaning for the existing HTML4 tags.
The big question is generally whether to use divs or tables. Tables create a lot of headaches, some of which you can't work around. But divs can have their problems as well.
Regardless of what you use, the level of nesting can indeed make the page difficult to understand. So you should favor the fewest levels of nesting needed. At the same time, trying to hard not to nest can also make the HTML difficult to understand.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Although, I know that a lot may depend on a particular web site, what is the mainstream? =) And also, what do you think of implementing CSS table-based layouts while IE6 and 7 are in use?
I use CSS floating at the general level, tables for tabular data, and absolute positioning if necessary.
i personally use a mixture of them all. For grid like data, I favor tables. For advanced layering, I use absolute positioning.
For website layouts I use a mix of CSS layout techniques. Depending on whether I am building a fixed-width site or elastic-width site the CSS techniques differ somewhat.
But, when I want to create any layouts for e-mail marketing then table layouts is the only thing I work with. And now with Outlook 2010 still supporting the Word HTML Renderer I don't think I will be using any CSS layouts for e-mails anytime soon.
As for CSS table layouts, you can use conditional comments to provide a seperate CSS style sheet for IE 6 and 7. Something like this:
<!--[if lt IE 8]
//different style sheet goes here.
-->
I would recommend reading the following two books:
Bulletproof Web Design, Dan Cederholm
Everything you know about CSS is Wrong, Rachel Andrew & Kevin Yank
The first book will show you CSS layout techniques for both fixed and fluid designs, whereas the second one will provide information about CSS table layout, including how to deal with browsers that don't support it.
Hope this information is helpful.
Floating combined with absolute positioning.
I never use tables, perhaps mostly because I got tired of them back when I had to use them because there was no alternatives.
Tables are not semantically appropriate for making a layout. The "correct" way to do things isn't anything you said in particular.
You should be using semantically-appropriate tags: header tags for titles, div tags for sections, lists for navigation/lists, etc.
Once you have this set up, style the elements in CSS, adding divs, spans, ids, and classes as appropriate. Floats, absolute positioning, etc. should be used as you see fit.
Things are dependent.
I want to put is that you should know what is needed.
One thing Div based layout renders fast than table base. There are some things that might affect your page render time in browse Like use external CSS only etc.