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 10 years ago.
Is there a good website or book that gives best practices for HTML layouts? I mean how to use divs to build differet kinds of layouts in a proper way. Thanks
I'd recommend going to CSS Zen Garden (http://www.csszengarden.com/). They're a site that is essentially having an eternal design contest, so they give you well structured markup to style (so you can see how they do it and take a stab at styling as well).
Good luck!
For HTML, there is really only one wellwritten book I know of: HTML Mastery.
HTML Mastery focus on HTML alone, without losing focus telling about CSS and JavaScript.
HTML5 is hot these days though. Introducing HTML5 is a quick read, so is HTML5 for Web Designers.
I use this basically as a guide:
http://www.hotpepper.ca/articles/semantic.shtml
Also check W3Schools on definitions of the different HTML tags and what you need to use them for. For example, you wouldn't use the < caption > tag for something that isn't a caption, would you?
Same thing for paragraphs, unordered lists, etc. One primarily bad example I saw from my former job was ordered lists. They used ordered lists to list down some users. That is good, but in the css, they hid the decimals. That means they could've have done with UN-ordered lists, which is what they should have used.
Always ask yourself why you are using a tag before using it. "Do I really need to emphasize this text? If yes, I should use an < em > tag." etc etc
See The 960 Grid System Made Easy. http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
Related
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 10 years ago.
I have the following:
I've implemented this via a list. This required lots of CSS. I'd like to add headings ("Operating System", "Percentage"), which will require even more CSS tricks
Using a table may be simpler.
In general, what is the preferred method: a table or a ul/list?
I would use tables. There is no reason to shy away from tables when you have a tablular data format like you do. You're using them for what they were created for.
The answer is really a matter of opinion/experience rather than an ultimate decision/fact (I know I'll get downvoted a lot for saying this, but I think it's true). Tables are not originally intended to be used for layout, even though using them might make stuff a lot easier. Using a ul with a lot of styling is 'okay' standards-speaking. Now this comes down to what you think;
tables work technically, even though that isn't what they're made for, and some people will make fun of your site's HTML.
Good CSS (when it's really good and doesn't break all positioning on window resize) is nice, although harder to use/write.
You make the decision!
It's a table, as ul doesn't have columns.
To fix the columns in an ul can be a bit tricky, whereas it is automatically done in a table.
The preference is always to have the HTML semantically match the content. Since what you have is a "list" of operating systems, you should implement them using an unordered list (UL/LI). If the content being rendered was data which would make sense, say, in a spreadsheet, then it would have been better to implement it as a table.
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 9 years ago.
I work in front end markup so I'm constantly templating site. Does anyone know of good resources to learn some good conventions or inspiration for element names? I like names that relate to print layouts so perhaps someone could point me to a resource for naming different sections of a document/layout.
I get a bit sick of using generic names such as block, wrapper, content, header etc over and over. Things like colophon, masthead, hero etc seem to hold more meaning.
A little bit of inspiration
I remember finding this when I was searching for the same thing. It's a collection of names used by some of the best known css guys. It comes from Andy Clarke
Here you go as requested in your comment...
http://meiert.com/en/blog/20080812/best-practice-ids-and-classes/
Got this in 10 seconds by typing 'best practice html class names' into Google.
Personally, I name my elements as abbreviations of what they relate to - div containing a submit button I would name 'smtbtn'. Short, sweet and phonetically almost says what it is.
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 10 years ago.
I haven't completely understand the concept of semantic HTML.
What benefits does the semantic HTML give, besides of readability/tag meaning/clean code? I've read the answers in What are the benefits of using semantic HTML? , but I haven't found any answer that says its usefulness to anyone besides coders/designers.
I've heard that semantic HTML is also useful for SEO, is it true? Also, is there any benefits for the users or for the browsers?
Sorry for my English, it is not my native language...
Accessibility!!
Like for blind people, they use software to read internet pages and to navigate.
A good semantic is a part of accessibility and a good help for them!
Plus all the stuff mentioned: SEO, clean code... Which are quite interesting also :)
besides of readability/tag meaning/clean code
Not good enough for you? Those are substantial benefits by themselves.
With the semantic web, you can write software that understands the semantics, the meaning of pieces of data.
With that, you get better results from search (yes, better SEO), more relevant information and better ways to organize information.
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 9 years ago.
I really would like to get into HTML 5 way.
As a title implies, I am looking for web sites that could serve as an example of HTML 5 usage. I am not talking about some kind tutorials. I am also not interested in shiny things like canvas, video, workers, geolocation ect, yes they are important and nice, but I would really like to become from the roots.
What I am looking for are the cases of, not only correct, but beautiful and self descriptive usage of markup (html elements, new and old, sectioning examples, new form features, microformats). So I could Ctrl + U them (view the source) and learn from them. As there a lot of not really well written websites, and from the other side, most of them are XHTML served as text/html, I found this a not so easy task. That is the reasoning behind that question.
Will be really grateful for all good links.
http://html5gallery.com/
check out http://www.html5rocks.com/
My favorite link for some awesome examples of HTML5 usage is at http://www.chromeexperiments.com/
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 9 years ago.
I have completed designing the template in photoshop. now i want to convert it into html although i am very well aware of all the html, css javascript elements i use firebug too , i have converted many templates till date. my codes does not comprise of the quality it needs. when i download any templates from some premium sites and look onto their codes i feel my code is very bad in shape, my codes crave for improvement. i want to master the proper use of div , ul and li elements, and the css.
is their any proper resource on the web that could teach me how i do it?
is it good if i use 960gs framework?
My Bible: A List Apart
Well, HTML5 Boilerplate provides a layout for quick coding of pages, although you'll need to go through it and pick out what you don't need.
Line25 has a lot of tips on coding sites, including a tutorial on converting from PSD to HTML, and Soh Tanaka's site also has a lot of tutorials.
Such resources as bestpsdtohtml.com can be useful too
css-tricks is another great resource and has some free video content demonstrating converting a photoshop mock up into html and css.
I think this is the first of three showing the end to end process.