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.
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 7 years ago.
Improve this question
I'm originally an iOS and mobile engineer and recently, I've been getting back into web development. In an attempt to dive as deep as I can into it, I've learned as much as about things like Webpack, more advanced SCSS, React, Redux, etc. After all my research, I'm still left with one burning question.
Why should I use HTML, specifically HTML5, elements in my markup vs creating all custom elements (such as a header using divs not header, wrapping dates in <time />, nav elements, etc). As an iOS engineer, I often find that design requirements make me build custom views with little to none built in view components and if I do, they're often my own components I've built from UIViews (equivalent to div, ish). In web development, unlike mobile, there are so many built in elements and I assume there's reason for that.
To ask it another way:
1) Are there specific performance advantages to integrating more HTML5 elements into my markup?
2) Are the advantages purely semantic? That is to say does using the built in elements more provide my website with better semantics and readability at first glance?
3) Is there an accessibility advantage to using built in elements?
It seems that this would be the primary reason to use HTML5 elements. Supporting accessibility is really just an extension of good user experience and that's always worth implementing.
4) If I do use HTML5 standard elements more, wouldn't that introduce some risk into my projects?
By risk I mean introducing unintended behavior. If I use a all divs and only divs in my markup, I have predictable element behavior across the board, especially when it comes to styling. All divs are equal in that respect. If I use a HTML5 element that I haven't read up on fully, would I not risk injecting unwanted (not necessarily harmful though) behavior?
I see your point and I have never really put much thought into this. However after looking through some articles and sources the general consensus is that there is no evidence that using custom elements causes any performance issue's over the standard HTML elements. However there is a few sources that say stick to some sort of guide line for the purpose of semantics correctness.
Are there specific performance advantages to integrating more HTML5 elements into my markup?
1) Not particularly, there is hardly any performance problems with markup that I have run into on multiple platforms.
Are the advantages purely semantic? That is to say does using the built in elements more provide my website with better semantics and readability at first glance?
2) Yes and no. Following the HTML5 element markup does make it easier for other developers to find a bug or to refactor the markup at some point down the line. And no HTML isn't purely for the semantic side of things although semantics do make things easier in a verity of different ways, in terms of SEO and how the browser reads the site for screen readers is vitally important to creating a fully accessible site on the web.
Is there an accessibility advantage to using built in elements?
3) HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class.
If I do use HTML5 standard elements more, wouldn't that introduce some risk into my projects?
4) I haven't come across this myself so I have no experience on this potential problem.
I would say if you want go for it, but keep in mind the advantages of using mainly HTML5 element's and the disadvantages of using custom element's. I personally most of the time use completely standard HTML5 element's but sometimes I might use my own custom element's for a situation that seems it would benefit from such as makes better semantic sense to write my own element for it versus using an element that might cause confusing later down the line to me and other developer's.
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.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Panel control over div is impacting hyperlink within the div as no linkable.My panel is just appear above my div hyperlink content.
so part of my hyperlink where panel displays not linkable.. but remaining part of hypherlink is linkable
I am not able to add my sample code over here..
Please see my detail post here.. http://forums.asp.net/t/1895787.aspx/1?Panel+UpdateProgressBar+controls+over+div+is+impacting+hyperlink+within+the+div+as+no+linkable+
You misspelled "progress" in the closing </progressTemplate> tag.
Update
Actually I was hoping that would fix it. Usually if you're having z-index issues and there's a borked tag, that's the reason why.
If it's still not working, then you need just need to dig into the CSS of the page and figure out why. The HTML you gave is not indicative enough to know what the issue could be. You want to 1) look at the rendered HTML source, rather than your ASP.NET view, and 2) look at what CSS is being applied to that HTML.
Generally, if you need to move an element above another that is blocking focus, you just increment z-index until you've achieved that. Just bear in mind that the element must have either position: relative or position: absolute before z-index will even apply and sometimes the overlapping element's z-index is ridiculously high (1000, 9999, etc.). So you might have to make the blocked element even more ridiculously high. This is all just trial and error stuff, though, so you're mostly on your own for that part.
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.