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 8 years ago.
Improve this question
I recently got into the discussion that float can be used in layout design, but should not be used for layout design. To specify, it can be used to float certain elements, but not position entire semantic sections and containers with respect to each other. Although the individual cited a couple sources (source 1, source 2) that could lead one to believe that float is hard to work with in some layout situations, I don't see any evidence linking to a specification to support the claim that it should not be used for layout.
If you can use float to position small portions of your layout, why not extend this technique for the big picture? i.e. the whole layout.
I know there are new techniques coming out like the flexible box layout and some others, but they are still drafts and are not supported currently. inline-block seems like a good candidate but sometimes you just need that float fix, and there are hacks to get this to work in older browsers as well.
So I guess my question is... is it true that float should not be used for layout? Is it a non-semantic or outdated technique nowadays, akin to the table layouts of yesteryear?
Semantics in the jargon-sense are simply a way of formatting HTML so that search engines can parse the data with some sort of context. Semantics in a broader sense is how you code your site so that other developers can pull meaning from your coding style.
Floats are simply a tool in your tool belt and have no semantic context whatsoever. Additionally, floats are so widely used that it would be incongruous to say that they shouldn't be used. There are plenty of frameworks that rely on floats as part of their integral structure (Bootstrap, Gumby, Foundation, Skeleton, etc).
I can speak, however, to the difficulty of using floats. For someone just starting with CSS it can be hard to understand what exactly is going on with floats. In addition, you have clearing and in-flow and out-of-flow elements. It can certainly be confusing. However, floats are absolutely a cornerstone of the CSS specification and I couldn't imagine doing my job without them.
Hope this helps!
Bootstrap is heavily dependent on floats, and its probably the most used CSS library. That being said, for every fan of bootstrap, theres someone there to say that its not best practice.
Do what works for you
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 months ago.
This post was edited and submitted for review 7 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
Can assistive technologies work properly if semantic tags are nested within a div used as a container to create the webpage layout?
I used to create the layout first with div containers using grid or flexbox, and later put the content inside, But I was wondering if this way of work affects the normal flow of assistive technologies.
Many semantic elements (e.g. footer, header, etc.) aren't that much different from a div CSS-wise. So, you can certainly customize them straight away without wrapping them.
I guess (mostly based on A11Y guides I've read through & axe output) that nesting doesn't really matter. It's to say, mostly a footer and a footer wrapped into a div are equivalent.
It depends on context for sure, there are elements (e.g. table, ul) that can only have children of certain types. Nesting in those contexts could lead to invalid (and not a11y-friendly) markup.
In the wild, I've mostly seen that people consider it "clean" to maintain the "top-level" markdown (header, nav, menu, main, section, article, footer) unwrapped (partially, because it's quite easy to achieve, I think, since you don't normally have a lot of CSS attached to those) & wrap all the rest as needed since "down there" on lover levels, the markup tends to get way less structured anyway.
All this however, seems to be rather a matter of preference.
It's probably worth checking out how the Document Object Model (DOM) is created to understand:
Tokenizing: The browser converts strings of characters into distinct
tokens—as specified by the W3C HTML5 standard for example, "<html>",
"<body>"—and other strings within angle brackets. Each token has a
special meaning and its own set of rules.
Here it is worth paying attention to the phrase "Each token has a special meaning and its own set of rules". Now let's check the rule for <div> from HTML5 standard:
The div element has no special meaning at all.
The div element is not a semantic element, and in this, it differs from semantic elements.
If you want to style the div element, then this may also not be a winning trick for constructing the Object Model. Styles have the task of presenting content to the user. When building the CSS Object Model (CSSOM), styles are tightly bound by rules to HTML elements (tokens). This brings us back to the semantics of HTML elements (tokens).
So your question is related to understanding the semantics of tokens (HTML elements). I would venture to suggest that the Accessible Rich Internet Applications (WAI-ARIA) standard is largely intended to add semantics to non-semantic HTML elements, including the HTML element <div>.
Summary: The use of semantic HTML elements makes it easier to understand the structure of the content, including users with disabilities.
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 8 years ago.
Improve this question
I've been thinking about this for a few days and wondered which would be the better layout option for making a forum: Tables or Divs?
Now to be specific, there are a few criteria here:
It will be in the familiar tabular presentation most forums use, such as the phpBB default theme.
It must be able to be responsive, ie if you want columns to be hidden at certain screen sizes, the whole row must be clickable, etc.
It must be easily re-stylable for custom skins.
My initial thought is that tables tend to have issues in responsive layouts, and the typical forum layout can be accomplished via divs, though they may require somewhat hacky approaches depending.
Is there really a benefit to either format? Would a Table layout be easier for a search engine to crawl? I'm trying to avoid too much opinion based points such as preference of divs over tables, unless there is a really strong case for it.
EDIT
There seems to be come confusion as to my question so I'm going to clarify. My question is not about the website format in its entirety. In fact, the project this is for is utilizing bootstrap. My question is: are there advantages to using tables for the Forum layout, ie where the forum categories are listed, the threads are listed, etc. These things are practically tabular data. What about tables for that. It's not purely data, but it is still somewhat tabular in its nature.
Once again, my question is not to discuss the merits of Tables for web page layouts, as the "Possible Duplicate" suggests.
maybe just flex-box ?
A Complete Guide to Flexbox
This may just be my personal opinion, but I think tables were made to structure data. Yes, there was a time when tables were heavily used for layouts but I guess we're all glad that those times are over.
Your site should be semantically correct, not only syntactically. I think this sentence sums it up pretty well:
"Tables should not be used purely as a means to layout document
content as this may present problems when rendering to non-visual
media. Additionally, when used with graphics, these tables may force
users to scroll horizontally to view a table designed on a system with
a larger display. To minimize these problems, authors should use style
sheets to control layout rather than tables."
http://www.w3.org/TR/html401/struct/tables.html
There are UI frameworks that do the job very well (in fact Bootstrap's column oriented approach is very close to a table) and I am quite sure that you will achieve the desired look using semantically correct tags. I am not a SEO specialist but I think that tables are not what you're shooting for in case of crawler friendly semantics.
It depends on the level of browser support that your looking for. Flex-box only works in IE 10 and above. There's options like display:table-cell (to attempt to make the element behave like a td table element), but again it has limited browser support for older browsers.
Tables should be kept for tabular data, and not used for layout, especially when there's tons of frameworks out there now (like Bootstrap) which will handle it for you.
One thing I have found really cool is Masonry.js, which rearranges the elements on a page to find the position for them based on their size and the size of other elements around them. It works in IE8 and above, and all other major browsers. The only downside is that it requires javascript where as Flex-Box (which gives a similar result) does not.
Alternatively you can write your own css for table layout, using a grid structure (similar to Bootstrap) where you have a set 12 column layout and rows containing cells which span across 1 - 12 columns.
Using a <div> can help too in making a layout responsive and table-like. You just need to change div properties a bit and you can use it as you are using tables! Here is the major change which can be done to transform <div> to table-like form
<head>
<style type="text/css">
.div { display:inline-block; }
</style>
</head>
<div class="div">Hello</div> <div class="div">World!</div>
display:inline-block; will force all div with same property to get in one line.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I'm updating a lot of code for a web app and tables are used everywhere to control layout.
I'm relatively new to HTML programming and am not sure what to make of the use of tables where CSS could seemingly be used. Is this just from a time now gone?
Bottomline, is the latest iteration of CSS and browser support acceptable enough to consider styling using tables antiquated?
In my opinion, the CSS is much easier to use.
It's a bit subjective, I know, but I think a consensus can be reached.
Use tables for tables. CSS for everything else.
The guy who first thought of using tables for layout wrote an article in 1997 stating, "The Web is Ruined and I Ruined It". There are countless similar articles, such as "Tables for Layout is Stupid" and the like. CSS has been around for that long and no developer worth his salt would not use it to layout his web pages. We're on the 3rd iteration of it and CSS itself is used to style tables by default in the browsers themselves.
At best, tables are a predefined, immovable grid of boxes you must fit your design into. Compare that to CSS which has limitless flexibility and reasoning for tables for layout flies out the window.
Do not use tables for layout. Use CSS. Nothing else to discuss.
This seems like a pretty subjective question, but basically the answer is that if the data lends itself to a table, put it in a table element. You can still style the tables with CSS, the HTML should describe the data whereas the CSS styles it.
If you have a table of data, don't make a "fake" table using divs/spans and make it look like a table. Put it in a table and style as appropriate.
If tables are being used for tricks like a 2-column layout, where there is no tabular data...yes that way of styling is obsolete and depreciated.
Keep in my though, I don't believe its a horrible "sin" to use tables for styling if it saves time, makes cross-browser compatibility easier, and looks fine. Remember, the only one (usually) reading your markup is the browser. If its going to take hours to rip out all the tables for the exact same end result, you might want to question if its worth the time/effort. On the other hand, when starting from scratch, you may as well learn the modern methods and create some maintainable markup.
Tables aren't going anywhere, it's in the HTML5 spec for a reason. You shouldn't use a table to style your website, but if you have some tabular data, then put it in a <table>. Just as you would put a paragraph into a <p>, a list of items into a <ul>, or a header into a <h1>.
People are so rash in their judgement of tables because they were used for evil for so long. I can use a bunch of <div> containers and a crap load of CSS to mimic an unordered-list, or just use semantic markup.
So, the lesson to be taken from this is, use tables for tabular data, and NEVER for styling. You should also never use things like valign="center" and cellpadding="0" on your table elements, this should be passed onto the responsibility of CSS to style.
P.S. look at Google's code, they're still using tables, and they're one of the main companies who are pushing HTML5.
It's easier (arguably), and has use for email clients. Legacy support is also better for IE 6 and below as well as other older browsers. Other than that, I have yet to see something tables can do that cannot be done with modern CSS. So the short answer is not any more.
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 4 years ago.
Improve this question
I have a custom control I built that contains a list of items to be selected.
I was concerned that these items would run together seeing as how there can be many different types of actions in this list.
Create
Edit
View
So I made the ability to separate these into groups by using a horizontal rule.
Someone I work with thinks that horizontal rules are a terrible design choice, and wants me to change it to a stylized DIV. I do not really have an opinion other than they are simple to implement. The HR I implemented is styled nicely and looks good.
Thoughts? Are horizontal rules a good or bad design choice?
Bad, and so is using a div simply for adding a horizontal div. Instead, consider putting the line which looks like horizontal rule as a border to the element you want to divide. This will be semantically correct as you are not affecting the structure of the HTML document you are creating.
This article goes in to depth about how div's can be abused by using them as presentation elements only. While sometimes there is no avoiding it, this is not one of those times.
I tend to agree with altCognito on this point, because they're purely presentational (at least they seem to be in every instance in which I've seen them used so far) they should be applied via the css.
There may well be a :after {content: /* hr */;} option, but, honestly, when there's border-bottom, which visually serves (or at least can serve) the same purpose, why bother with the <hr /> anymore?
They can, of course, be styled if you do decide to go with it, although W3 Schools suggest that all the potential styling options are now deprecated. If this is so, and it can't be 'officially' styled, it'd be best to avoid it, I think. Even if only from a purist mentality to maintain validity of your stylesheets.
The only problem with the HR is that it's always there. I'm assuming your co-worker believes that you might not always want the HR to be displayed, and using the DIV and a css solution let's someone remove or change it in one global css file. (although, the HR could be controlled by css also)
The div+css solution isn't a bad one, but for what you describe, the HR solution isn't bad either. I'd just go with whatever is convenient in this case.
This question already has answers here:
Basic Coding Standard for HTML and CSS [closed]
(3 answers)
Closed 3 years ago.
The HTML standard defines a clear separation of concerns between CSS (presentation) and HTML (semantics or structure).
Does anyone use a coding standards document for CSS and XHTML that has clauses which help to maintain this separation? What would be good clauses to include in such a coding standards document?
We don't have a physical document we all adhere to where I work. There are a number of guidelines we try and keep in mind but there isn't really enough information to require a physcial document. This article sums them up these guidelines pretty well. You may also consider formatting your CSS to make it easier to read. Smashing Magazine has a great article on this subject.
The article referred to by #Lee Theobald is a good start.
Some basic ideas I try to keep in mind when marking up:
Regarding html:
Try to write for the next person - that is, think about how easy or difficult it might be for someone else to come and pick up your work and carry on.
To support this principle, you should try and make sure your markup is as legible as possible - class and id tags in particular should relate as much as possible to their intended content. In other words, try to use your tags to describe the kind of content they will have.
For example, "Sub-navigation", "content" etc.
The aim is to provide markup that someone can pickup having not looked at before and get a sense of the logical structure of the document.
Also, try to avoid the addition of markup that is purely to achieve a visual effect. But bear in mind that any website that requires even slightly sophisticated styling is unlikely to be able avoid non-semantic markup, due to weaknesses in current implementations of CSS and browser-compatibility issues.
Regarding CSS files:
Many people divide their css up into sections using comments, separating them into functional or structural areas. So you might have a section for your header, your footer, or typography and so on. Others take this further and split css across files, having one for typography, one for layout etc. However, this can according to Yslow! can have a negative impact on page loading, due to increased http requests.
I could write more, but as you can see I struggle to be concise. I hope this is of some use to you.