Learning HTML v. HTML5, CSS

Topic

New Reply

Hi,

A friend of mine has never learned HTML, CSS, etc. She would like to learn the latest and greatest, but is unsure if she needs to start with HTML (presumably v4) and then HTML5, or can she start with the latter? If the latter, is there a book that someone can recommend that assumes no prior knowledge of HTML? The HTML5 books that I have seen all seem to assume prior knowledge of “div” tags, etc. Same question for CSS.

Any books that can be recommended are appreciated. She has a developer’s background, just not using web technologies.

Thanks!

Reply | Quote

Replies

In my experience, it’s very hard to find a reference that covers it all. Unless someone has other knowledge about a book that covers everything in a decent manner, probably starting with HTML and CCS and then progressing to HTML 5 may be the route.

For a good desk reference covering HTML and CSS I quite like Web Design in a Nutshell, from O’Reilly. It usually includes an introduction the the relevant concepts and then shows its use, in a concise manner. Once the basic concepts are understood, even if you move to books that deal in greater depth with some subjects, this one will still be invaluable as a reference. You can then jump right into the HTML 5 realm and maybe get a more design oriented book for greater in depth coverage of CSS, but this one is very good as a start.

Reply | Quote

Thanks for the suggestions. Someone said to me that HTML5 is very different from HTML (presumably, v4), so that learning HTML before learning HTML5 was pointless. I was going to suggest to my friend that she learn HTML, then buy a reference that explained the new features in HTML5. Was I wrong?

Reply | Quote

Someone said to me that HTML5 is very different from HTML (presumably, v4), so that learning HTML before learning HTML5 was pointless.

No, that’s not true. Most of HTML4 is very relevant to HTML5, but some features are deprecated or removed, particularly inline formatting (replaced with CSS), and tags that come in pairs need to be closed (e.g.,

blah blah

) similar to XHTML. Separating content and styling, and closing tags, is a general best practice that works in HTML4 and HTML5, so there’s no conflict there.

Reply | Quote

Yes, and therein lies her predicament. She has no prior experience in Web development, so does not know HTML, CSS, JavaScript, etc. So it would be helpful for her to read a couple of books (ideally, one, but we know that there is no such thing!) that teaches HTML from the ground up including the extensions added by HTML5.

I found some titles that looked like good HTML5 references, but they seem to start there, assuming a prior knowledge of HTML. It would be confusing for her to read an HTML4 book, then to have to un-learn some of that when reading an HTML5 book.

Any suggestions for a good reference?

Reply | Quote

I concur with HTML & CSS being a good starting point. HTML5 is still in a state of flux. The HTML5 standard is not yet complete and it is likely to be a couple of years before it is. Some parts of it are well known and most likely not going to change. Any time spent on the basics will be well spent.

Joe

--Joe

Reply | Quote

Thanks, JoeP. My limited understanding of HTML5 is that the standard won’t be fully developed for 10 more years, but that it has use right now and that web developers should consider it a viable option. Am I wrong? When looking at the Silverlight, Flash/Flex, AJAX, HTML5/CSS3 landscape it seems that all roads are leading to HTML5 and that new projects should be developed using it, assuming that all requirements can be satisfied with the spec as it stands today.

Reply | Quote

HTML 5 just adds a set of new features to HTML. It’s not a totally different thing. So your friend does not lose by learning HTML. Actually she will need it, to use the HTML 5 features in web pages.

The problem with HTML 5 and any developing standard, is browser support. Some browsers will support some features and other won’t. Until the whole thing settles down, it will be some time. Also, do not forget, that there are millions of users using older browsers, without any support to any HTML 5 features.

Reply | Quote

I had already been tinkering with HTML by cleaning up web sites created in FrontPage, so I don’t think I ever bought a beginning tutorial book. Fortunately, the web has many tutorials.

The other problem I have recommending a book is the ones I liked most were focused on XHTML, which adds some little eccentricities of its own to HTML. With that in mind here are a couple of classics:

Amazon.com: Web Designer’s Reference: An Integrated Approach to Web Design with XHTML and CSS – This book isn’t a tutorial; it’s a reference.

Simple Goods – Web Standards Solutions: The Markup and Style Handbook (I have the original edition) – This book is not a “start here” book, but a “how to” book that addresses specific layout issues (e.g., multiple columns of different lengths, rounded corners) and shows how to address them in a cross-browser compatible manner by hand rather than relying on any particular editor.

Reply | Quote

Thanks, jscher2000, for the recommendations. I will look into them.

I am also anxious to hear what others have read to help them get started on their Web development journey.

Reply | Quote

Using the Big G (google), you’ll find tons of ebooks that teach how to begin with those stuff.
i learnt CSS and HTML myself that way.

Reply | Quote

You definitely should start with HTML5. The problem is that most HTML5 resources out there are for people who are already web developers who want to know what is new and different about HTML5 from previous versions, and that won’t be helpful. However, if you learn HTML 4 first, you’re going to learn everything the old way and have to re-learn everything and un-learn old bad habits. It would be like learning to type with all the keys different on the keyboard after you already know how to type them the way they are. It’s best to start with what you’re going to use in the end.

The only HTML tutorial that I know that is for beginners and is also taught from an HTML5 perspective from the ground up is the one on educator.com. It’s a video tutorial and it’s a generic introduction to HTML, but it goes in depth to HTML5 stuff and is all taught from an HTML5 perspective, but it also gives info on just all of HTML, which is why it isn’t labeled an HTML5 course. You can find the videos here: http://www.educator.com/computer-science/html/strine/

Best of luck!

Reply | Quote

However, if you learn HTML 4 first, you’re going to learn everything the old way and have to re-learn everything and un-learn old bad habits. It would be like learning to type with all the keys different on the keyboard after you already know how to type them the way they are.

I disagree that the differences are that drastic. Some good habits, such as closing your tags, are optional in HTML4. People can code with good habits even if they don’t adopt the new tags in HTML5.

I will try to find time to check out the video.

Reply | Quote

I disagree that the differences are that drastic.

You’re right they’re not so drastic that it’s going to be impossible to re-learn. But there are a lot of little quirks that are different and it will take time to learn the little quirks and then un-learn or re-learn them in HTML5. The most drastic difference is that the content model is totally re-worked from HTML 4.01.

Your example of closing tags is a good one, actually, because while HTML5 is more rigorous in some aspects of tag syntax, it’s _less_ rigorous in other aspects. In HTML5 the anchor element can encase block level elements, for example, which is not allowed in HTML . But HTML5, like HTML 4 still allows a lot of tags to be imbalanced, for example you usually don’t have to close your paragraph tags (there’s a lot of tags with optional start or end tags).

On the other hand, HTML 4 was still technically an SGML language, and you were required to use strict SGML syntax, but HTML5 is freed from those constraints, so time spent on the finer points of SGML will be wasted (did you know that <div

and and are valid SGML and HTML 4 syntax?). Also, HTML 4 forbids XHTML syntax, but HTML5 allows it.

Probably the biggest thing is content model though. Here’s the content model in HTML 4.01 Strict:

[*]Block level
[*]Inline level

And here it is in HTML5:

[*]Metadata content
[*]Flow content
[*]Sectioning content
[*]Heading content
[*]Phrasing content
[*]Embedded content
[*]Interactive content

Clearly there’s a lot more going on in the HTML5 spec. The Educator course has a whole lecture dedicated to teaching HTML5 content model and though it does talk about how it’s different from the previous version, it only explains just enough to get you to understand the significance. It would be a waste to really thoroughly understand the HTML4 content model in todays world, I think.

Reply | Quote

It would be a waste to really thoroughly understand the HTML4 content model in todays world, I think.

I see what you mean, but at the same time, if IE7 and IE8 users are an important audience, someone has to keep coding for them. (Just back from hours of frustrating changes to adapt my script-that-works-in-Fx7 to IE8…)

Edit: Also, you are right that no one should study the fine points of SGML to learn how to code web pages, because browsers routinely ignore those rules anyway. Even the w3c validator is pickier than any real browser. So when I say one should learn HTML4, I meant it in a practical sense rather than a highly academic sense.

Reply | Quote

I see what you mean, but at the same time, if IE7 and IE8 users are an important audience, someone has to keep coding for them. (Just back from hours of frustrating changes to adapt my script-that-works-in-Fx7 to IE8…)

Edit: Also, you are right that no one should study the fine points of SGML to learn how to code web pages, because browsers routinely ignore those rules anyway. Even the w3c validator is pickier than any real browser. So when I say one should learn HTML4, I meant it in a practical sense rather than a highly academic sense.

I come at the issue of backwards-compatibility (and we all can agree that IE is backwards) from the other direction. I think it’s important to first learn the newer and better way to do things, and then learn how to fix the bugs in poor and old browsers. Well coded HTML5 is more versatile and will work in older browsers than well coded HTML 4. All the fancy new HTML5 features won’t necessarily be available, but an HTML5 site should be functional in an old browser.

You’re right about me being more academically minded–most people would probably skip the SGML section in a book, and rightfully so (today). Still, why not just start out learning from the newest HTML available? I think your answer is that it doesn’t really matter that much, which is, of course right. Regardless of the ideals of my ideal world, everyone learns the same version of HTML first: tag soup. From there it’s up to the coder and how much they care whether they’re going to learn to code properly.

Reply | Quote

Stumbled across this website while searching for information. Due to some changes at work, I find myself needing to learn HTML and CSS. I agree that learning the best possible language is the right course. That said, and as others have said before, there’s a lack of information on HTML5. Everything I find is a quick reference for a web developer. I peeked at Educator.com, but I’d much prefer some books or other options.

Either way, none of it is very friendly to a beginner currently. It almost seems as if it was purposely designed to confuse. HTML 4.01 or XHTML? Or HTML 5? CSS3? Whatever way you go, it seems to come with a caveat. I’m reading a book right now that says HTML 5 will never exist, XHTML is the future. Oh really?

I really prefer to learn HTML5/CSS3 first, and then work backwards a bit when needed, to fix something in horrible IE. That seems more difficult than it should be right now. I suppose I’m forced to study the basics of HTML 4.01 and then just get the more advanced HTML 5 book. Same for CSS, etc.

Thoughts?

Reply | Quote

Part of the confusion is that different versions of HTML aren’t really different versions. In the end, a good web developer doesn’t know HTML 4.01 Strict or HTML5 or HTML 3, they just know HTML. A good one will understand all the complexities of the different ways to code, including historical information and will have an educated, thought out (and informed by the most up-to-date information) reason for choosing to code to a specific standard. Many people still choose XHTML, which I think is an awful idea because you can’t serve it to IE with the correct MIME type, which means that you’re actually not conforming to a standard. You’d be better off coding in tag soup. But I can’t be too judgmental because some people may actually have a reason that they NEED an XHTML doctype. Most people read a book somewhere that said “XHTML is better” or “XHTML is the future” and went off that without being totally informed of anything else. The truth is that you should know what you’re doing.

If you need a place to start out, just make sure your source is as up-to-date as possible. HTML 4 is VERY old now. There’s a huge difference between a source that looks at HTML 4 as the newest thing on the block, extolling it’s superiority over HTML 3, and a source that teaches HTML 4 in comparison with contemporary strategies and issues like AJAX, cloud computing, etc…

The problem is that most HTML5 courses are not actually HTML5 courses: they’re “upgrade” courses for people who already know HTML. If you’re able to find a course that was written in 2011, that FAR trumps any version considerations. An HTML 4 course written today will discuss HTML5 extensively and will leave out things in HTML 4 that never got used or that are outdated today. A full HTML5 course (not an upgrade) will talk extensively about the old way of doing things, for example, will talk about how to write HTML5 video () and then will talk about how to do the whole flash embed thing (about 30-40 lines of code to accomplish the same thing in HTML 4) as a fallback for browsers that don’t understand

With that in mind, I would say look to things that are HTML5 aware. Don’t worry about versions, but generally, HTML5 aware tutorials will be more up to date.

Some resources that I use:
alistapart.com
annevankesteren.nl
htmldog.com
w3.org
html5doctor.com
opera.com/company/education/curriculum/
educator.com

Reply | Quote

Mira,

Thanks, that all makes sense. I’ll look into just finding some courses that are HTML 5 aware. The resources you gave are a good start.

Also, I think you’re right. Many people are still writing in XHTML simply because everything they learned claimed it was the best. All the books I’ve been reading (pre 2009) claim that all websites should be written in XHTML strict, without really explaining the downsides, such as the IE issue you mentioned.

Reply | Quote

By the way, for a complete and technical explanation of why XHTML is terrible and should (almost) never be used, see this link:
http://www.webdevout.net/articles/beware-of-xhtml

What it boils down to is that XHTML is chosen because it’s “more strict” but the browser handles it as invalid “tag soup” HTML (not XHTML), e.g. totally not strict at all. For a slightly less technical explanation, there are tons of posts at Mr. Van Kesteren’s blog (e.g. http://annevankesteren.nl/2004/06/invalid-html).

The Educator.com lesson does a great job of explaining in layman’s terms information that even the experts don’t understand about the differences between XML, XHTML and HTML and all the versions of each of those. There’s a lot of history and tragedy, etc. and it takes a half an hour for him to explain it all but it’s totally worth it: http://educator.com/computer-science/html/strine/markup-language.php.

Reply | Quote

W3school is best for new comers.

Reply | Quote

Starting with HTML4 or HTML5 doesn’t matter. The basics are the same and HTML5 is an extension to HTML4 (with a few minor exceptions). The drawbacks to HTML5 is that the features implemented in one browser are a different list than built into another. In fact, many of the features have yet to be implemented in any of the browsers.

A good place to learn web stuff (usually for free) is W3SCHOOLS. To practice what you learned, they have an interface for you to code specific portions and see how it works. http://www.w3schools.com/html5/default.asp which is the HTML5 tutorial.

Ask your friend why she wants to learn HTML. If she wants to eventually use it, then she might be better off learning how to use an IDE or web site developer. There are several available and many are free. They are usually use features implemented in most browsers and make sure each browsers unique feature implementation is accounted for. Just because a feature is implemented, doesn’t mean each browser implemented it to work exactly the same as other browsers.

Reply | Quote

I’m also in search of the best way to learn HTML5 without wasting any time. Here’s a course offered by UDEMY
http://www.udemy.com/html5-crash-course/
Any feedback/suggestions?

Reply | Quote