So I'm a self taught web developer but have only been doing it for a little over a year. Therefore, compared to other people, I'm still pretty new to the field. I had a quick question for those of you out there familiar with wordpress and html5. I was wondering why it was hard for me to find, highend, paid wordpress themes that utilized the more semantic html5 tags such as article and section instead of the typical, div class = "section", setup. Take a look at this paid theme for example, which upon inspection makes use of the header and nav tags but not article, section and aside tags:
http://demo.hb-themes.com/?theme=Highend
I've seen a bunch of others they looked the same. My main question is am I wrong to judge these sites for not using the basic html5 tags mentioned above? I thought these tags were important in giving google and other search engines more semantic code to look through. The reason I ask is I'm considering purchasing a wordpress theme for now so that I can get my site up on the internet quickly while in the meantime develop my own design for the future. I do not want to pay for a theme that is not up to standards, if those standards are relevant today. Any thoughts would be appreciated. Thank you.
You can not add css to html5 selectors without relying on html5shiv or modernizr. Too many people are still using old browsers and, in my opinion, the Internet is not ready websites that only use the html5 tags. By using "div class='section'" you increase the cross browser compatibility.
HTML5 is great for sectioning content but an html4 with Aria roles and proper use of header tags will still gets the job done. If you are concerned about search rankings, just make sure your website is fast loading, responsive, and has good content.
Related
I've got plenty of experience in HTML, CSS, JavaScript, Jquery, etc. but I've yet to make the plunge into HTML5.
In trying to get my head around HTML5, I've become a bit confused. So it's a relatively new standard and my uninformed brain tells me it's not well supported. Is this true?
I've got a vague idea that there are some 3rd party scripts that improve HTML5 compatibility, again am I right?
Any good tutorials on getting to grips with the basics of HTML5 for an experienced developer?
Ok a lot of questions there but:
HTML5 is quite well supported on most modern browsers nowadays and it's generally safe enought to use as is.
Scripts to improve compatibility? you mean Javascript that detects how old your browser is and depending on the answer show you HTML 4.01 or 5? well maybe but again, it's at the point when it is not required anymore.
Yes: w3schools has a cool one.
All of that said bare in mind that HTML 5 is still in development and not a done deal. Some areas are still being implemented but at the speed things are take this is not an issue for starting to develop your pages in HTML 5.
This website - html5 doctor is a very usefull resource that you can browse looking for what's implemented where and how things are generally going.
I also found this link to be particularly useful when figuring out what's available for each browser and what's not.
Another subject that goes well with HTML5 is CSS3. Check them both out and maybe come back with specific questions ;)
the HTML5 buzzword is being used a lot, but people mostly use it to describe different things.
HTML5 is the newest (and as of yet, unfinished) iteration of the HTML standard, as presented by W3.org.
Purely, HTML5 is the markup language, but it is usually referred to as to include CSS3, and JS (in the form of the canvas element).
In the HTML area, HTML5 boasts some new element tags that should help developers add semantic meaning to their markups(e.g. header, footer, aside) , and also some useful functional elements (progress-bar, video, audio)
In the CSS area, there are some new properties that allow you to animate your elements, and orient them more easily.
In the JS area, you can read up on the Canvas element, which is a good competitor to Flash. It allows you to draw both using vectors, and bitmap data.
As for good references to HTML5, you can use http://html5doctor.com/ or http://www.html5rocks.com/en/
Hope this helps.
Please note that w3schools isn't such a good reference anymore. Although for just looking at the possibilities it's fine I guess.
I recommend the tutorial from Lynda, but there are other sites. Just search at google. It's also possible to buy a book, since there have been written a few already.
Fallback/polyfill Scripts & libraries like Modernizr,Javascript Libraries can help you take care of older browsers. (backwards compatible)
As for the browsers. Use chrome, it supports most of the functions. Look at sites like findmebyip for more information about what is supported.
HTML 5 support is not yet fully integrated in all browsers. They are still in development stage. For studying the HTML 5 the best medium would be w3schools
They have introduced new elements in HTML5 which has reduced our overhead for html. New Elements
CodePlayer
Videos for HTML 5
I defied all conventional knowledge, and wrote my HTML5 site first. Now I am writing the HTML4 site and adding a script which detects old browsers. The question I have is mainly regarding web safe fonts. I am aware that it is best practice to use HTML instead of images of pretty text, for the benefit of SEO. However, since the HTML5 website exists with the HTML in the headers, I wonder if it is safe to use images to represent those headers in the HTML4 version of the site. Simply put, will my web client's indexing suffer? I feel that the HTML5 version will ensure good ranking, but I wanted to put it to the community and get an opinion.
Second question, should I create the more accessible version in HTML4 or XHTML?
Finally, is there a simpler way to make a new site backwards compatible, and still be able to make use of newer technology?
After a fair amount of research, I found that it is not so unusual to create a site in HTML5, and implement items for the purpose of graceful degradation.
At this site: spacebug.com/gracefully-detect-old-browsers-and-fallback-from-html5/, the authors recommend not using PHP user agent variables to detect browser capability. It says that there are too many user agents and that headers change, etc. Check out the link for their in-depth explanation. It offers that the right way to do it is to use javascript to check for certain capabilities. Since my purpose is to either render it in HTML5 or render it in XHTML, this makes my life pretty simple.
Once I found that javascript was the way to go, a simple Google search led me to this site: diveintohtml5.info/detect.html. This offers a number of methods for detecting browser functionality as it relates to HTML5.
For those who are not as savvy with the code, or for those who are looking for a quick solution, the second website also offers a link to modernizr.com, which is an "open-source MIT licensed javascript library that detects support for many HTML5 and CSS3 features."
So, thank you all for your input. I have learned a great deal from this experience, and I am hoping it will make everything much more user friendly and efficient.
Happy developing!
Kat
I am a designer and my only knowledge with programming is ActionScript 3.0. ActionScript is quite different in different versions — ActionScript 3.0 is a lot diffrent than ActionScript 2.0 or ActionScript 1.0, so it’s no good learning 1.0 or 2.0, the best thing is to learn 3.0 and you're good.
I'm wondering if it is the same with HTML?
I want to start learning about XHTML, HTML & HTML5, and CSS3. Should I start learning about the basics of HTML first, would that be usefull to me? Or should I go straight into HTML5?
Please recommend whatever you think would get me started. (Books, great video tutorials, maybe some guy that is good at teaching in video tutorials, advice, tips, anything you consider relevant is welcome.)
Thank you.
HTML 5 is (essentially) HTML 4 with bits added, so learn "HTML".
5 isn't a rewrite from scratch, and it is still in draft form so large chunks of it are subject to change and have limited browser support.
When you think about html, 4 or 5, you need to primarily see it is a language for describing documents and the data they contain. At its core, html is just that. It is gaining new capabilities, but it's still a markup language for documents. People are trying to look at it as a robust programming language, but even the new dynamic features require javascript to assist its functionality. Don't be tricked into thinking html5 is all that different from html4 - They still do the same things, for the most part.
The key to writing good, useful html (Regardless of the version) is proper use of semantics and clean/efficient code authoring practices. If you're using the proper tags and writing very clean code, you're already doing better than some 'professionals' I work with. This is a big deal.
When you look at a document, you can break it down into parts. There are doctypes, meta data, linked resources, media objects (images, embedded objects), text based data (tabular, paragraphs, headings, quotes, lists, etc), forms, frames, and the elements that hold all of this together, with or without styles.
That is essentially the foundation of an html document. You can output it with php or ruby or whatever you like, but a proper document will always contain some (Or occasionally all) of these things. An ideal document will contain these things in the correct places (clean, consistent coding) to serve the purpose they are intended for (semantics).
What html5 introduces are additional elements to satisfy semantic requirements as well as useful, dynamic elements that align well with growing requirements based on how people use and develop websites. For example, there's canvas, a scriptable rectangular element for presenting visual information. Then there is local storage - the ability to save key pair style data into a user's web client database for later access, which would be extremely useful for saving changes made to contenteditable elements (Another html5 feature) on a site, perhaps, if you knew the same client would always be used. There's quite a bit more, but I guess you get the picture.
The new html5 features are extraneous to writing 'good html'. They're useful, but you can learn to write great html without them. In fact, that's exactly what I've been doing for the last ten years before html5 appeared. I recommend starting with the basics - Learn about semantics, what they mean, why we'd use them, and even include new html5 tags (Outside of canvas - Canvas is a useful element, but using it is not necessarily using html). Learn about browser support for elements, then learn to link resources in the head, such as stylesheets and javascript. Eventually, you'll have a good feel for basic html, and you'll start wanting to use more advanced techniques.
For now, if you aren't a master of new html5 features, you aren't missing out. There's some cool stuff, sure, but the spec may still change and you can spend this valuable time learning the things that won't change - The fundamental things that make html coders genuinely useful.
edit: As for resources, check out these sites:
Generally useful resources
Quirksmode - Good blog, browser compatibility tables
html dog - Very basic, would start you off well
HTML5 Semantics and other information
HTML5 Doctor - Easy reading; To learn a bit about new html5 tags, but mostly, their semantic intention (This is important)
A List Apart - A good look at semantics, again.
Dive into html5 - For when you just feel like doing some reading
HTML5 is just the same old HTML but updated to match today's internet. There is no reason (that I can see) to learn the same language but with outdated information. It will only serve to confuse you - I suggest you instead focus on HTML5 and CSS (XHTML is pretty much HTML4 with some stricter rules) and move on from there to whatever interest you most.
Yes, you should start with the foundation, HTML, before learning about the things that depend on HTML
I've been asked by a recruiter for how many years I'm testing HTML5/CCS3, and I never thought if our app uses any of those, and our UI developer is not online at the moment to ask. I googled it and found on yahoo answers that the source code for the HTML5 page will have
<!DOCTYPE html>
in it at the top. Is that the only thing to be sure it's HTML5?
What about css3? What should I look for in the code?
HTML5
HTML5 isn’t one big thing (see http://diveintohtml5.ep.io/introduction.html). There’s no easy way to tell if a given HTML page contains any HTML5 features other than listing all the new features in HTML5, and checking the page for them.
Differences between HTML5 and HTML4
The HTML5 doctype is a decent signal that the author intended the page as HTML5, but you can use it on HTML4 pages just as correctly, so it’s not really indicative in and of itself.
CSS3
CSS3 is even less one big thing, as CSS has been split into lots of individual modules which are expected to progress individually.
The modules are all listed on the following page. Selectors and CSS Color are considered finished; all the other modules are listed under the High Priority and Medium Priority headings. Unfortunately I don’t think each module lists which features were added after CSS 2.1, so you’d have to compare them to the 2.1 spec.
http://www.w3.org/Style/CSS/current-work
You can pretty much consider HTML and CSS as unversioned languages at this point. I’m sure that won’t stop recruiters asking for min 5 years HMTL-5 experience though.
just download the css files with wget/curl and look at the defs, as well as looking at the page source to see if you see any css3 transforms. Or use webkit/firebug to look at the css.
Let me begin this topic by explaining my background experience with web design. I have always been more of a back end programmer, with PHP and SQL and things. However I do have a shallow background with HTML and CSS. The problem is, I don't know it all. What I do know is, when it comes to designing (not back end dirty work) I understand basic CSS properties and I also understand HTML and I can usually throw together a sloppy web page with the two and a couple bazillion DIV tags.
Anyways..
The problem I always have encountered is that when I design a website in a browser such as IE7 (and then it looks perfect on IE7), and then look at it on IE8 or IE6 or Mozilla (etc.) it gets all spacey and ugly and looks totally different than the way it should look on IE7.
Question one:
Basically, what I am asking everyone is what route should I take to learn how to properly build the website? Build as in put it togehter with CSS standards and HTML standards that will make my site look the same on every brwoser. (Not only learning standards but where can I learn to properly write my code?) Where is a strong free resource I can use to learn how to these things?
Question two:
How do I properly code my website? Do I use all external style sheets to make dynamic page design simplistic or do I hard code some things into the DIV tags on each page? What is proper?
Oh, and if anyone has any tutorials on how to properly design a complete layout feel free to throw it in a response somewhere.
Thank you for taking the time to read my questions, and hopefully you will understand what I am trying to get out to everyone. I need to get on the right route of the designing side of web programming so that I will know how to create successful websites in the future.
Thank you,
Sam Pardee
First, I recommend NOT starting with IE as your "development" browser. Start in Firefox, say (which gives you the advantage of tools such as Firebug and the web developer toolbar), and then get it right in IE afterwards.
Second, definitely user external style sheets; it results in much cleaner code and a much simpler way to make style updates. Definitely recommended. Also external CSS files can be cached by the browser, so they won't increase the page download size as users go from page to page in your site or application.
Lastly, start by defining your content using simple HTML, basing the structure on the meaning of the content (often called "semantic" HTML), not on how you want it to look. Use a <ul> tag for something that is a list of items, for example, even if you don't want to display it as a "bullet list" (the default styling for <ul>). Then start adding styles to make it look right. This will result in very clean HTML that can support a variety of formats and layouts (take a look at CSS Zen Garden to see what I mean) and will also help push you towards a layout that reflects the structure of your content, which will be easier to read and comprehend.
In terms of books, you can't go wrong with Eric Meyer. HTML is easy, of course, and I don't recommend doing fancy stuff with HTML, so put your learning effort into CSS (Eric is the CSS guru).
Cross-browser compatibility is always an issue. It's a staple of web development, sadly, and there is no magic bullet. Luckily, the main offender, IE6, is finally starting to fade.
A1.
When starting work on a new site, first take every piece of content that needs to be on the page and paste it into a text file. Then put it in a rational order (thinking "If I had to use a text browser to use this page, how would I want it to be arranged...").
Then start wrapping HTML tags around each piece of content. For each piece, think "What type of information is this?" A heading? h1/h2/etc tags. A paragraph? A quote? A table? p,quote,table. Essentially, use HTML tags that describe what kind of information each piece of content is. When I do this, I pay no attention to how it actually looks in the browser at this point.
Once the content is all marked up, begin writing the CSS. If at all possible, try not to touch the markup during this step. Sometimes that isn't possible, though, and throwing a div or span around some elements is unavoidable. The less meaningless markup, the better.
In my experience, this approach keeps things very clean and tidy, and makes debugging layout issues a lot easier.
A2.
Building the styles into your markup using the "style" attribute is fine for prototyping, but beware, the temptation to leave them there once it works is strong. The best practice is to have all of your styles in external stylesheets. I'm interested to hear any alternative viewpoints.
Some great web standards/CSS resources:
http://www.csszengarden.com/
http://www.alistapart.com/
http://www.thenoodleincident.com/
http://www.quirksmode.org/css/contents.html (useful reference for selector-compatibility)
http://centricle.com/ref/css/filters/ (good reference for css hack compatibility)
http://www.zeldman.com/
http://meyerweb.com/
Hope this helps!
There are TOO many site out there that have really great tutorials for HTML and CSS. They will give you all of the information you are asking for. I would start doing some reading of the great gurus of HTML/CSS:
Simon Collison
Andy Budd
Molly Holschzag
Dan Cederholm
Jason Santa Maria
Eric Meyer
Jeffrey Zeldman
Cameron Moll
Any book or article you can fond from these folks will steer you in the right direction; you can't go wrong!
As for sites that will give you the proper methods/concepts/training for web standards compliant sites:
http://www.w3schools.com/default.asp
http://www.webstandards.org/
http://www.smashingmagazine.com/
http://www.webdesignpractices.com/
http://www.designmeltdown.com/default.aspx
http://www.cameronmoll.com/
http://www.alistapart.com/
http://www.cssnewbie.com/
http://www.css3.com/
http://htmldog.com/
http://css-tricks.com/
http://simplebits.com/
http://www.colly.com/
http://glish.com/css/#tutorials
http://meyerweb.com/
http://jasonsantamaria.com/
The one of the best books I've bought so far to help with HTML and CSS coding PROPERLY is Beginning CSS Web Development by Simon Collison. Great, easy to understand, and not too slow. Great examples to follow along. After that, buy CSS Mastery - Advanced Web Standards Solutions, also by Simon Collison, and Andy Budd and Cameron Moll. This book gets you up to speed with some advanced techniques that you'll see on the many of the web sites right now, some of which were invented by the authors.