Beginning HTML5 on HTML5 in 24 Hours

Force a Download with HTML5

Fri, 09 Feb 2018 17:32:43 +0000

HTML5 is the greatest version of HTML ever! (Well, at least until the next awesome version comes out). I just learned how trivially easy it is to force downloads with HTML5.

I was just trying to force a download of a PDF file because the customers need to sign it and send it back and it’s harder to do that online. I was going to use JavaScript, but decided that I’d do a quick search in case there was a better way.

Forcing Downloads is Easy—HTML5 to the Rescue!

Not only is there a better way, but it’s trivially easy to implement. I just add the keyword download to my anchor and BAM! the browser will pop a dialog box. I haven’t tested it in a lot of browsers (or devices), but it’s still huge! I mean, as a fallback I can attach a download function only to links that have the download keyword in them.

Now my download links look like this:

<a href="link to file" download="">Download the PDF</a>

I’m practically crying, I love HTML5 so much!!!

A Busy Week

Mon, 31 Aug 2015 03:06:24 +0000

I spent the last week working on two projects: the “Learning HTML and CSS Livelessons” and editing the Sams Teach Yourself Bootstrap in 24 Hours book.

It was both one of the most fun weeks I’ve ever spent and also one of the scariest (at least at first). I have never been in front of a camera before, and I spent 6-8 hours a day on Monday through Wednesday right there. Luckily Pete and his dog Shorty were there to put me at ease. It ended up being a lot of fun.

Now, of course, I have a bunch more work to both catch up from being gone for several days and some update work to get the website ready for the videos. This LiveLessons series is intended to help people learn enough HTML and CSS to get a website up and running and looking good. I’m hoping that if this project does well, I can do another on something like CSS to go into more depth on how to use CSS and style really fancy pages.

[caption id=“attachment_1135” align=“alignleft” width=“150”] Sams Teach Yourself Bootstrap in 24 Hours And I also got the first 50% of the technical and copy edits for the Bootstrap book. And I got the second 50% right after I got back. I’m hoping the second half is fairly error free (as far as we have found) like the first half. And as always, any errors that make it into the final book are my fault not my copy editor or tech editor (thanks Jon!)

One of the biggest challenges of writing a book about Bootstrap is that I find myself wanting to convert every site I look at to Bootstrap. I finally upgraded this site to Bootstrap just this week. And I’ve converted a couple of other sites I manage as well. But let me tell you, even as the author of the book, my clients don’t all want to do a huge redesign just because Bootstrap rocks. Oh well, their loss.

What’s Next?

My next project is finishing up a book on web publishing. That should be fun, and hopefully pretty quick. After that, who knows? If you have any ideas, let me know!

amzn_assoc_placement = “adunit0”; amzn_assoc_enable_interest_ads = “true”; amzn_assoc_tracking_id = “kyrnindesign-20”; amzn_assoc_ad_mode = “auto”; amzn_assoc_ad_type = “smart”; amzn_assoc_marketplace = “amazon”; amzn_assoc_region = “US”; amzn_assoc_linkid = “4e58e504a77bddbf022bf0fe2039d151”; amzn_assoc_emphasize_categories = “13900871,2238192011,1064954”;

HTML5 Cheat Sheet

Fri, 14 Aug 2015 22:08:43 +0000

I built an HTML5 cheat sheet for myself, so that I could make sure that my tag libraries were up-to-date and so on. And then when I finished, I realized that this might be something you would like too.

It is a PDF file listing all the HTML5 elements, what they are and whether they are new, changed, the same as HTML 4 or gone from the specification (and what you should use instead). I hope you like it!

HTML5 Cheat Sheet PDF

Comments:

jim - Apr 2, 2013

Awesome list! Thanks! One minor gripe, though: The section “Tags not in HTML5” is hard to read due to the dark gray background.

Jennifer Kyrnin - May 0, 2013

Thanks for the feedback. I’ll see if I can fix that.

Dorian Mattar - Nov 1, 2013

Thanks for the cheatSheet, but I have a few comments. 1. Although it’s a “pdf”, it’s not a searchable pdf as it’s an image and not a true pdf. Not so much an issue because it’s alpha and only one page, but still it could have been… 2. The resolution is also not optimum and when magnified for high-resolution monitors, it pixilates. A true pdf would also solve this issue. 3. There is no sample code for each tag, which would make this truly a great cheat sheet. Thanks, Dorian

Bill Waddy - Apr 3, 2014

Thanks for the cheat sheet.

Viraj Lathigara - Mar 4, 2016

Thank you very much for this cheat sheet ! It had been very helpful to me and my friends ! Its my humble request to you to provide one more thing, We want sample codes for each and every tag. Hope you will help us !

HTML for RWD—Learn the HTML You Need in a Free Chapter

Mon, 11 May 2015 16:09:24 +0000

from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

While responsive web design uses CSS to adjust web designs to respond to the devices viewing the page, you need to start with good HTML. Chapter 5 of my latest book Sams Teach Yourself Responsive Web Design in 24 Hours helps you learn the basics of HTML so that you’re ready to create a responsive website.

In chapter 5, you will learn:

How to write HTML for RWD
How to build a basic web page with HTML5
What semantic elements are and how to use them
Why valid HTML is important

And this chapter is available for free on the Informit website.

Note that if you’re a complete novice to HTML, this chapter will only be a starting place. It’s intended as an introduction to the minimum HTML you might need to do RWD. If you need to learn HTML, you should check out my first Sams book: Sams Teach Yourself HTML5 in 24 Hours (get a copy).

HTML5 Allows Tables for Layout

Tue, 16 Sep 2014 00:08:32 +0000

If Someone Tells You That is Invalid, They are Incorrect

I’ve been writing HTML since 1995, and in that time various techniques and tools have come in and out of style. But one that has been especially troublesome is the idea of using tables for web page layout.

Back in the late 1990s, there weren’t a lot of ways to lay out your web designs. You could use the single-pixel GIF trick to add spaces, and you could ignore layout and hope the browser displayed your content in a legible way. So when tables became available in HTML, many designers (including myself) leapt upon them as a gift from the heavens. Finally there was a way to create layouts with fixed widths, specific placement of elements, and more. Web page editors made them really easy to create—even if you used tons of embedded tables to get exactly the look you wanted.

Soon, nearly every web page with any attempt at design was built with a <table>.

But HTML4 came out and said:

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.”

http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

And nearly every web designer who used tables for layout let out a scream of frustration. While I believe that CSS isn’t terribly hard to learn, many people have found it very difficult. And layout is particularly challenging. But for several years, we struggled and strained to learn CSS for layout and stop using tables for that purpose.

HTML5 Changed the Rules

According to the HTML5 specification, while tables for layout is not recommended, it is a valid way to design web pages. You just have to make sure that you indicate that the table is a “presentation” table, not a data table. Specifically:

“If a table is to be used for layout it must be marked with the attribute role=“presentation” for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.”

http://www.w3.org/TR/html5/tabular-data.html#the-table-element

How to Use a Table for Layout in HTML5

In order to indicate that your tables are layout or presentation tables, rather than data tables, you can add one of two attributes:

role="presentation"This is the most compliant method, and is what the W3C recommends. But it requires that you change every web page you have written to include this attribute.
border="0"This attribute also indicates that the table is a presentation table, because most data tables include borders. Plus, most layout tables do not use borders, so you shouldn’t have to change anything on your pages.

There are other ways to indicate a presentation or data table:

Table Feature

Type of Table

<table role="presentation">

Presentation

<table border="0">

Presentation

<table cellpadding="0">

Presentation

<table cellspacing="0">

Presentation

Use of the CAPTION, THEAD, or TH elements

Data

Use of the headers and scope attributes on the TH element

Data

<table border="">

Data

<table border="1">

Data

Visible borders set with CSS

Data

Tables cause problems for web pages. They can be slower to load. They can be difficult for search engines to parse. And they mix the content and design, which is more effective when it’s separated.

Comments:

Dave Greene - Sep 2, 2014

What tools/techniques do you recommend for design and layout, Ms. Kyrnin? Thank you.

Jennifer Kyrnin - Sep 4, 2014

Hi Dave, That’s a great question, and deserves more than just a comment answer, so I’m working on a post that discusses this in detail. But in the meantime, here are some of my favorite tools: - WordPress - I use this for most of the sites I build and maintain because it’s easy to use and lends itself to many different types of sites. - Komodo Edit - this is a free text editor that I use to write all my articles, blog posts, and more. I often have to then convert the documents into something more formal like a Word Document or blog post, but Komodo Edit is where I start most projects. - Macaw - this is a web design tool that I love to use for working on new responsive designs. - Dreamweaver - I also use Dreamweaver for RWD, but not as often as I used to. - Chrome - I test everything in Chrome first and then move from there to other, less standards-compliant browsers - Photoshop - I edit most of my images in Photoshop to keep them as small as possible.

James M - Dec 0, 2014

I agree, there are far too many people dogmatically saying you must never use HTML tables for presentation rather than tabular data. In an ideal world, all browsers would support CSS3 flexible boxes, but in the real world, they don’t. And we have to design for the real world, so we have to design for the browsers that are actually being used, not the ones we would like to be out there. And the reality is that IE8 is going to be with us for some time yet, so designers of websites for the real world are stuck with not using CSS3 flex boxes for the foreseeable future. The very fact that CSS3 introduced flex boxes is an obvious indication that CSS2 specifications were lacking a good alternative to HTML tables. I have seen many methods to make CSS2 imitate tables, but they can often end up being no better than the hacks we used to use for IE6, etc. For example, the CSS text-align: justify is often used to align css divs, when the text-align is semantically intended only to apply to text. I do always try to avoid HTML tables for presentation if I can do it easily with CSS2. And I have used the text-align: justify to align divs. But if trying to emulate a table ends up with anything more than a few simple HTML and CSS workarounds, then I have to face the fact that it is coming to the point where the attempt to emulate a table is becoming counter productive, and instead, I use a HTMl table with role=“presentation”. Otherwise the claimed benefits of separation of semantics and content, and ease of alteration by CSS disappear, and the “don’t use tables for presentation” becomes a mantra without logical justification. As a case in point, I don’t think that there is any sensible alternative to using tables when, within a div that contains content, you want to include content that consists of three elements where the two side elements are fixed sizes and the central element expands to fit the remainder - and it contains a single line of text that you want centered. And where it degrades gracefully if the central element becomes very small. With a table it’s simple. Try doing that in CSS without using CSS3 and you end up with a big bunch of unwieldy code. Until the vast majority of browsers actually being used are CSS3 compliant, the reality is that there is no reason not to use HTML tables with the attribute role=“presentation” if there is is no sensible CSS2 alternative.

What's new in HTML5 from HTML4? Make the Switch!

Wed, 13 Aug 2014 12:00:39 +0000

One of the most common questions I get asked about HTML, and HTML5 in particular, is “Should I use HTML5 or not?” Find out why you should make the switch from HTML4 to HTML5.

My answer to the question “Should I use HTML5 or not?” is always “Yes!” HTML5 is the current standard for web page designs, and all modern web browsers and editors support it. In fact, even if you’re using an older editor like FrontPage, you can modify your designs to use HTML5 by changing the doctype.

What are the Advantages to Using HTML5?

HTML5 is the standard, having replaced HTML 4.01. And many modern devices like iPhones and iPads are optimized for HTML5. Some of the differences from HTML4 include:

new elements or tags
changes to a few existing tags
addition of a tag removed from in HTML 4
a new doctype

But the number one thing you should remember about HTML5 is: it’s backwards compatible. In fact, if all you do is add the <!doctype html> to the top of your HTML 4.01 document (removing any old <!doctype> tags), you’ll be fine. Your HTML will have been switched to HTML5. It’s that easy!

The New HTML5 Elements

There are a bunch of new elements (often called tags) in HTML5:

[<article>](http://webdesign.about.com/od/html5tags/p/bltags_article.htm)
[<aside>](http://webdesign.about.com/od/html5tags/p/bltags_aside.htm)
[<audio>](http://webdesign.about.com/od/html5tags/p/bltags_audio.htm)
<bdi>
[<canvas>](http://webdesign.about.com/od/html5tags/p/bltags_canvas.htm)
[<datalist>](http://webdesign.about.com/od/html5tags/p/bltags_datalist.htm)
[<details>](http://webdesign.about.com/od/html5tags/p/bltags_details.htm)
[<dialog>](http://webdesign.about.com/od/html5tags/p/bltags_dialog.htm)
<embed> (Note: this element was deprecated in HTML 4.01)
<figcaption>
[<figure>](http://webdesign.about.com/od/html5tags/p/bltags_figure.htm)
[<footer>](http://webdesign.about.com/od/html5tags/p/bltags_footer.htm)
[<header>](http://webdesign.about.com/od/html5tags/p/bltags_header.htm)
[<hgroup>](http://webdesign.about.com/od/html5tags/p/bltags_hgroup.htm)
<keygen>
<main>
[<mark>](http://webdesign.about.com/od/html5tags/p/bltags_mark.htm)
<menuitem>
[<meter>](http://webdesign.about.com/od/html5tags/p/bltags_meter.htm)
[<nav>](http://webdesign.about.com/od/html5tags/p/bltags_nav.htm)
[<output>](http://webdesign.about.com/od/html5tags/p/bltags_output.htm)
[<progress>](http://webdesign.about.com/od/html5tags/p/bltags_progress.htm)
[<rp>](http://webdesign.about.com/od/html5tags/p/bltags_rp.htm)
[<rt>](http://webdesign.about.com/od/html5tags/p/bltags_rt.htm)
[<ruby>](http://webdesign.about.com/od/html5tags/p/bltags_ruby.htm)
[<section>](http://webdesign.about.com/od/html5tags/p/bltags_section.htm)
[<time>](http://webdesign.about.com/od/html5tags/p/bltags_time.htm)
<track>
[<video>](http://webdesign.about.com/od/html5tags/p/bltags_video.htm)
<wbr>

New HTML5 Attributes

Along with all the new elements there are a bunch of new attributes.

The HTML <input type="text" /> element has a bunch of new attributes to define different input types. I strongly recommend you start using these immediately.

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

There are now a bunch of global attributes that can be added to every element:

accesskey
aria-*
class
contenteditable
contextmenu
data-*
dir
draggable
dropzone
hidden
id
inert
lang
on_event_ (these are various event handlers like on_mouseover_ and on_play_)
role
spellcheck
style
tabindex
title
translate

There are also a bunch of new attributes added to specific elements to make them more functional.

Element(s)

New Attribute

<a> <area>

download ping

<area>

hreflang type rel

<base>

target

<meta>

charset

<table>

sortable

<th>

sorted

<input> <select> <textarea> <button>

autofocus

<input> <textarea>

dirname inputmode placeholder

<input> <output> <select> <textarea> <button> <label> <object> <fieldset>

required

<fieldset>

disabled

<input>

autocomplete height list min max multiple pattern step width

<textarea>

maxlength wrap

<form>

novalidate

<input> <button>

formaction formenctype formmethod formnovalidate formtarget

<menu>

type label

<button>

<style>

scoped

<script>

async crossorigin

<html>

manifest

<link>

crossorigin sizes

<ol>

reversed

<iframe>

sandbox seamless srcdoc

<object>

typemustmatch

<img>

crossorigin srcset

Obsolete Elements

One new feature of HTML5 is when elements are no longer used, they are marked obsolete. That means that browser makers can continue to support any of these elements and web designers who use them don’t need to go through their code to remove them. But best practices recommend that you should stop using these obsolete elements as there are better choices available in HTML5.

Obsolete Element

Replaced By

<basefont> <big> <center> <font> <strike> <tt>

CSS

<frame> <frameset> <noframes>

Nothing, they damage usability and accessibility. Use <iframe> if you must have frames.

<acronym>

<abbr>

<appet>

<object>

<isindex>

form controls

<dir>

<ul>

<noscript>

Only conforming in HTML5, not XHTML5

New APIs in HTML5

One of the best parts of HTML5 are the new application programming interfaces or APIs. These are commands and scripts that give you more control over your HTML5 documents and let them look and act like an application and not just a web page.

The new APIs are:

Media APIs for video and audio playback
Constraint validation
User commands
Offline web applications
Web application registration for media types
Contenteditable
Drag and drop
URL History and location
Base64 conversion
Timer-based callbacks
Prompts
Printing
Handling search providers
A defined Window object
Microdata
Bitmap graphics
Cross-document and channel messaging
Run scripts in the background
Client-side storage
Bidirectional client-server communication
Server-to-client data push

HTML5 is Better for Web Pages

As you can see, while there are a lot of exciting new features to HTML5, there are none that are required in order to use it. In fact, it’s easy to just get started today with the doctype and then add new features as you learn them and become more comfortable with them.

It’s a good idea to start using HTML5, if you haven’t already, because it gives you more features and controls for your web designs. Plus with more and more people using mobile devices that are optimized for HTML5, you can ensure you aren’t losing your audience.

HTML5 Learning Lab Available

Wed, 30 Jul 2014 00:22:18 +0000

HTML5 Mobile Application Development in 24 Hours Learning Lab

I’m pleased to announce that the latest version of my book Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours is available in a Learning Lab format from Pearson.

The Learning Lab takes the entire book and adds interactive quizzes, videos, step-by-step lessons, and live code editing right in the book. If you’ve wanted to do more practice while learning HTML5, this is an excellent version of the book to get.

Three Free Chapters

The first three chapters are available online for free for you to try out and see if this version will work for you.

I worked hard on these videos and on the quizzes as well as writing the entire body of text, so I hope that you enjoy the HTML5 Learning Lab.

Still Here, but Busy

Fri, 25 Jan 2013 20:11:38 +0000

Some people have wondered if I’m still around or maintaining this site (and the book) and I am, I’ve just been fairly busy. I hope to announce some exciting new things in the coming months, but in the meantime I can’t post as often.

If you want to learn HTML, my book is a great place to start, and you can also get help on my site at About.com: Web Design / HTML.

Latest Zeen issue is now live

Fri, 14 Sep 2012 17:30:12 +0000

Teach Yourself HTML5 Zeen - Issue #2

I’ve posted the second issue of my HTML5 Zeen today. There are a few things that are wonky with the issue, most notably that Zeen says it’s “Issue #3” when it’s #2. But whatever.

In this issue I show you some ways to get started with HTML5 if you haven’t already. Including the cover image which shows you the basics for what you need to write to create an HTML5 document.

Writing HTML5 is Really Easy

All it takes is a DOCYTPE:

<!doctype html>

And you’ve got an HTML5 document. One thing that most people forget is that HTML5 is not a new language. It’s evolved from HTML 4.01 and HTML 3.2 and all the versions before. So if you’re writing HTML 4.01 today, you can start writing HTML5 by just changing one line of your HTML. Don’t worry about changing anything else.

The Zeen issue goes into more detail about dealing with older browsers like IE8 and using editors like Dreamweaver to write your HTML5, but at the end of the day, just putting up the new doctype is all it takes. Poof! You are using the most up-to-date specification. That didn’t hurt a bit!

Comments:

Sunday Ayodele - Sep 6, 2012

Hi,with simple and straightforword instruction given by you here,then i can say HTML5 is easy to learn.but to me i only stop or stay on HTML3.2.With this level,if i jump to Html5 can i still cope?

Jennifer Kyrnin - Sep 5, 2012

@Sunday Ayodele: You can switch to HTML5 gradually. Nearly every element in HTML3.2 is valid in HTML5, so you can start by simply changing your doctype to the HTML5 doctype. Here’s a good article to check out: 8 Ways to Get Started with HTML5 Today

8 Ways to Get Started with HTML5 Today

Fri, 22 Jun 2012 04:40:22 +0000

HTML5 has been around for a few years now, and yet there are still a lot of people who are resistant to using it. But there are a number of aspects of HTML5 that you can start using today without any worries about compatibility whatsoever:

The DOCTYPE <!doctype html> This is required in order to write HTML5, but it also won’t hurt your site even in older browsers. Browsers that don’t necessarily recognize the doctype will still display the page correctly — they’ll just use quirks mode.

The shortened meta character set <meta charset="utf-8"> This was implemented in HTML5 because every browser out there defines the character set from this tag. And the browsers implemented it because web designers were doing it by mistake.

Remove the type from SCRIPT and STYLE elements <script src=""></script> <style></style> In HTML 4 it was required that you use the type attribute to define scripts and styles. But as long as your style sheets are using CSS and your scripts are using JavaScript (ECMAScript), you can leave off the type designation and they will work without any issues.

Sectioning elements <section>, <article>, <aside>, <header>, <footer>, <nav>, and so on You can add the sectioning elements into your existing HTML and they won’t change the way the page looks at all. Browsers that don’t recognize them will ignore them, and browsers that do will add that semantic information to the site.

Other semantic elements <mark> and <time> Like sectioning elements, these add semantic information to the content, but browsers that don’t recognize these elements will simply ignore them.

Use the id attribute instead of name While both attributes are valid in certain situations, you can use the id attribute to create anchors within your text. This isn’t an HTML5 specific change, but all modern browsers support linking to an ID with the pound-sign (#), for example: <h1 id="headline1"> <a href="#headline1">

Use placeholder links <a>placeholder link</a> A placeholder link is just a link that doesn’t have an href attribute. They are another item that most web designers have used at one time or another, and now with HTML5 they are valid.

Use the new INPUT types in your forms When you use an input type of email on your email input fields, browsers that support it will validate that the data looks like an email address. And browsers that don’t support it will simply ignore the type and treat it as a text box.

Blink and you missed it. TIME element back in the HTML5 spec

Sat, 05 Nov 2011 18:10:16 +0000

from: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours

After a large uproar by designers and developers last week when they removed the HTML5 TIME element, the W3C recanted and put it back in the spec. So you don’t have to replace TIME with DATA, but you can if you want to.

This corrects last week’s errata post. The book still contains the TIME element, but does not contain the DATA element.

What’s really great is that this shows that the W3C is listening to us. So if there is some other problem with the HTML5 spec, don’t be shy—let them know. If enough agree, your change may happen!

The TIME Element Has Been Removed in Favor of DATA

Thu, 03 Nov 2011 00:03:32 +0000

As of October 29th there is a new element in HTML5: DATA. The DATA element is for defining content that has both human- and computer-readable data. Some examples of this are:

Dates and times
Numbers
Colors
Money

Each of these can be written in a way that a human will understand, while a computer might not. For example, a date can be written December 16th, Dec 16, 12/16/11, 16 December, and many other ways. While it is possible to teach computers to know that all those things are dates and what they meant. So you can set the value of a date on a data element with a standard format that computers can read.

<data value=“2011-12-16”>December 16th</data>

With the DATA element and its required attribute value you can define data for microformats and microdata as well as for scripts on your web page. The content displays in a format that humans appreciate and the value attribute has the content in a format that computers can read and use.

The `DATA` Element Replaces the `TIME` Element

In the same revision to the HTML5 specification that brought us the DATA element, it also removed the TIME element from the specification. While you might be disappointed, this is really a good thing. The TIME element was limited only to date and time formats and as such had a limited scope. With the DATA element you can mark up all sorts of things that can be defined in both human- and computer-readable formats, you are not just limited to dates and times.

How This Affects the Book

I submitted my final revision of the book on October 25, 2011—four days before this change went into effect. The book covers the TIME element, but does not include the DATA element.

Who is the HTML5 in 24 Hours Book for?

Thu, 20 Oct 2011 18:19:40 +0000

I’ve been working on editing the proof copies of the book for the last several weeks and one thing that keeps popping to mind is the audience. I wrote the book intending it for a beginner audience, but I should clarify this. When I say that it’s for beginners, I mean beginners to mobile and web application development, not beginners to HTML.

I wrote the book to teach people who already have some knowledge of HTML and web development how to use HTML5 to create mobile web applications. The book is not intended to teach someone who has never built a web page before how to write HTML. There are lots of books available that you can use to learn HTML. These are some of my favorites:

I hope that designers and developers interested in learning how to build mobile web applications will find my book useful. And if you’re still learning HTML, there’s always my site on About.com to help you get started. I have tons of resources there to help beginners learn HTML and web design.

Borders on tables now ok in HTML5

Fri, 22 Apr 2011 16:05:05 +0000

If you use tables (not for layout, of course) it can be very tedious to get the borders to surround every cell using CSS. You need to set the border on the table and on every th and td, and then collapse the borders with border-collapse. I don’t know about you, but I would often just add the border attribute to the table, just to get it done quickly.

Well, this week the HTML5 working group decided to make that okay again. They agreed that many tables need to have borders to define the cells. The proposal pointed out that putting CSS on a table to define the borders would not be carried over when the table was moved between implementations. In other words, if you wrote a table in an HTML document, and then ported that document into XML, the borders in CSS would stay with the CSS, not with the table.

Now it is legal to write `<table border>` to add borders around your table and table cells. I, for one, am pleased!

Comments:

Steven K. Mariner - Mar 5, 2015

This is good news and a welcome relief. I was starting to wonder if the fine folks who worked on the HTML5 standard even used HTML anymore. The insane amount of overhead required by the use of CSS to do everything suggested they have forgotten that sometimes *people* make web sites, and mobile devices have to load them *slowly*. Mandatory content increase is a bad idea, and HTML5 is littered with it.

Welcome to my new blog about HTML5

Fri, 15 Apr 2011 06:11:34 +0000

I am excited to start working on this blog about HTML5. In it I’ll provide sample sites written in HTML5, links to tutorials on other sites, references that I use to learn HTML5 and lots more. I hope you enjoy learning about HTML5 as much as I enjoy writing about it.

Beginning HTML5 on HTML5 in 24 Hours

Force a Download with HTML5

Forcing Downloads is Easy—HTML5 to the Rescue!

A Busy Week

What’s Next?

HTML5 Cheat Sheet

HTML5 Cheat Sheet PDF

Comments:

HTML for RWD—Learn the HTML You Need in a Free Chapter

from: Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

HTML5 Allows Tables for Layout

If Someone Tells You That is Invalid, They are Incorrect

HTML5 Changed the Rules

How to Use a Table for Layout in HTML5

I Don’t Recommend Tables for Layout

I would recommend using tables for layout for your older pages, but as you redesign and rework pages, you should consider converting to CSS layout.

Comments:

What's new in HTML5 from HTML4? Make the Switch!

What are the Advantages to Using HTML5?

The New HTML5 Elements

New HTML5 Attributes

Obsolete Elements

New APIs in HTML5

HTML5 is Better for Web Pages

HTML5 Learning Lab Available

Three Free Chapters

Still Here, but Busy

Latest Zeen issue is now live

Writing HTML5 is Really Easy

The Zeen issue goes into more detail about dealing with older browsers like IE8 and using editors like Dreamweaver to write your HTML5, but at the end of the day, just putting up the new doctype is all it takes. Poof! You are using the most up-to-date specification. That didn’t hurt a bit!

Comments:

8 Ways to Get Started with HTML5 Today

Blink and you missed it. TIME element back in the HTML5 spec

from: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours

The TIME Element Has Been Removed in Favor of DATA

The DATA Element Replaces the TIME Element

How This Affects the Book

Who is the HTML5 in 24 Hours Book for?

Borders on tables now ok in HTML5

Now it is legal to write <table border> to add borders around your table and table cells. I, for one, am pleased!

Comments:

Welcome to my new blog about HTML5

The `DATA` Element Replaces the `TIME` Element

Now it is legal to write `<table border>` to add borders around your table and table cells. I, for one, am pleased!