HTML5 Tutorials on HTML5 in 24 Hours

Do Hackers Care About Your Meta CharSet?

Fri, 19 Aug 2016 17:10:26 +0000

The other day, I got this question about the meta charset tag in the mail:

“Would you be so kind as to explain to me, in logical terms, how in 7 hecks does the presence of:
<meta charset="utf-8">
is supposed to affect a ‘hacker attack’ in accordance to your book?
I literally cannot imagine hackers caring much about which charset you display on the UI side when attacking.”

This is a great question. The book he’s referencing is Sams Teach Yourself Bootstrap in 24 Hours, and in it I emphasize the importance of using the meta charset tag and placing it as the first element of your <head> element. But while I explain that leaving it out can leave a page vulnerable to hacks, I don’t explain why. But I will now.

Cross-Site Scripting (XSS) Attacks

According to Wikipedia

“[a cross-site scripting or XSS attack] injects client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy.”

In other words, a website that has an XSS vulnerability can be hacked.

The UTF-7 Attack and How to Protect Your Site

There is an exploit that hackers can use called the UTF-7 XSS attack. They attach content to web forms and other pages that include malicious code encoded as the fake encoding “utf-7.”

Web pages that do not have the character set defined are vulnerable and can be attacked with this exploit. This doesn’t mean that every web page without the character set defined are vulnerable, because XSS attacks require other elements like JavaScript or a form. But if a web developer adds those elements to the page in the future, that page could be hacked.

Why Define the Character Set?

While it’s true that not every page has a cross-site scripting (XSS) vulnerability directly, by getting in the habit of always defining the character set of your web pages, you reduce the risk that you’ll forget to do it on a page that could be attacked.

It’s also true that many web servers use HTTP requests to define the character set automatically on all pages. But it’s not easy for a web designer to check that. Plus if the server changes or the pages are moved, the new server might not have that feature. By adding the <meta charset="utf-8"> tag to your <head> element, you ensure that the page has one level of protection without having to do anything else.

Note: you don’t have to use the meta tag to define the character set. You can use HTTP on the server, set it with PHP or another scripting language. It doesn’t really matter how you define the character set, as long as it’s set. It’s just easiest for most web developers to do it with the meta tag, because that’s what we have direct access to.

Do I Have to Use UTF-8 in the Meta Charset?

It doesn’t matter what character set you use, as long as you use a valid one. I like UTF-8 because it includes a huge number of characters so I can write things like ñ and ∫ right in my HTML without having to use character codes. The default character set in HTTP 1.1 is ISO-8859-1.

This is Not the Final Word on XSS Protection

Please do not expect that adding the meta charset tag will protect your site and scripts from all XSS attacks. This is not true. There are many things you need to do to protect your scripts from XSS vulnerabilities. But adding the meta charset tag is a start.

XSS is not the only way your website can be hacked, for example the Shellshock exploit that came out a few years ago. Don’t think just because you’re writing HTML that your web pages cannot be hacked. Always take security seriously, even if, like the questioner, you cannot imagine a way that hackers can attack your pages. Just because you can’t imagine it doesn’t mean that the hackers can’t. And they are imagining new attacks and exploits every day.

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 !

The Lazy Way to Mobile-Friendly

Sat, 18 Apr 2015 17:26:23 +0000

Or How I Made a Simple Change on a Bootstrap Site to Please Google

Like most web designers I know, I am frantically trying to get many websites mobile-friendly in time for Google’s deadline of April 21st. Knowing that Bootstrap is a very mobile-friendly framework, I have been migrating a lot of the sites I manage into it. This has worked great, but as the deadline looms ever nearer, I have been cutting more corners in getting the sites ready.

And at this point, most of the sites that I’ve left hanging are my own.

So today, I decided to check my branding site http://htmljenn.com/. And as I suspected, even with Bootstrap, it came up as not friendly.

](/images/screenshot515.jpg) I knew that header image was too big!

As you can see from the picture, my headline graphic is way too large for most mobile screens. I knew this, but I was probably hoping it would fix itself overnight or something. It didn’t.

Luckily, Bootstrap offers a feature that makes it easy to get rid of the offending graphic (for now) and replace it with text that is mobile-friendly: The Bootstrap responsive utility classes.

There are 16 classes you can use in Bootstrap to show and hide content from different sized devices. They are:

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

You may notice that I only listed eight classes above. That’s because the .visible classes each have three variations:

.visible-*-block
.visible-*-inline
.visible-*-inline-block

Since I realized that most likely the real problem with the mobile site was that the banner image was too big, I decided to hide it (for now) on smaller screens. Instead, I would show them the site title in an <h1> tag.

So I added the <h1> site title (<h1>HTMLJenn</h1>) and then added the class .hidden-md to it. This would hide the site title from any devices of medium size or larger.

Then I hid the banner image by adding the class .visible-md-block to it. This makes it visible only to devices of medium size or larger.

After I uploaded these simple changes, I tested on Google and got:

[caption id=“attachment_1131” align=“aligncenter” width=“300”] It’s mobile-friendly!

Hooray! My site is mobile-friendly. Now to work on making it look less ugly! But that can wait until I’ve finished fixing all my other sites!

What To Do to Make Your Site Mobile Friendly

Test your site to see if Google feels it is mobile friendly.
If it isn’t, don’t panic. Google will not delist your site. This bears repeating. Just because a site is not mobile friendly does not mean that it will not show up in Google search. It just means that when someone on a mobile device searches Google, your site will not rank as well as a similar site that is mobile friendly.
If it isn’t already, add your site to Google Webmaster Tools and follow the instructions in the Google Mobile SEO

There are many ways you can make your sites more mobile friendly. The Bootstrap framework is one way to get a responsive web design fairly quickly.

More Help with Bootstrap, Mobile-Friendly Design, RWD, and Google’s Change to Search Results

Order my book Sams Teach Yourself Responsive Web Design in 24 Hours
Get Bootstrap
Pre-order Sams Teach Yourself Bootstrap in 24 Hours by Jennifer Kyrnin
Read Mobile First Responsive Web Design by Brad Frost
Test your site with the Google Mobile Friendliness Test from Google Webmaster Tools
Read Finding More Mobile Friendly Search Results from Google Webmaster Central

How to Speed Up Your Website with GZip Compression

Wed, 17 Sep 2014 18:25:22 +0000

If you follow the instructions on the Yahoo! YSlow best practices, one of them is to compress your pages using gzip compression (“Gzip components”). By doing this, you compress all your files before they are sent across the web, and then the browser decompresses them on the other side. This can significantly improve the time it takes your website to load.

How to Compress a Website with GZip and HTaccess

First check that your site is not already compressed. Some hosting providers do this automatically.

Go to GID Zip Test and enter your URL. If it returns that your site is compressed, you’re done.

[caption id=“attachment_892” align=“alignnone” width=“300”] This site is compressed

If your site is not compressed, you need to know what web server you’re using. If you’re not sure, ask your hosting provider, but the most common web server is Apache. Chances are, that is what your site uses too.

Compress Files on Apache

Go to the root directory of your web server and edit the .htaccess file in a text editor. If you can’t see that file, first make sure that hidden files are visible and if it’s still not there, then you should create a file with that name—including the dot (.) at the beginning of the file.

Add the following lines to the file:

\# gzip compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\\.0\[678\] no-gzip
BrowserMatch \\bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Upload the .htaccess file to the same location on your website (typically the root folder).
Test your site again using the GID Zip Test site.

If Your Apache Site Still Isn’t Compressed

Many hosting providers use virtual hosts for web hosting, and sometimes these don’t always recognize all commands in the .htaccess file. Your best bet is to talk to your hosting support to see if they can get it running. They will probably have to add the above lines (in step 2) into the httpd.conf or vhosts.conf file.

Compress Files on IIS

I don’t have an IIS server, so I cannot tell you exactly how to do it, but Microsoft has a comprehensive Technet document: Configuring HTTP Compression in IIS 7 that covers: configuring compression, enabling compression of dynamic content, and enabling compression of static content.

Comments:

Earl - Sep 4, 2014

Compression makes a world of a difference on page speed. I use Gzip on my own sites and average about a 61% reduction rate. Never knew about the GID Zip Test tool though, thanks for sharing.

What Semantics Means in HTML and Why You Should Care

Tue, 09 Sep 2014 21:20:21 +0000

Once you’ve been writing HTML for a while, you may come across the term “semantic HTML.” But what does that really mean?

What is Semantics?

You may have heard the phrase “that’s just semantics” used as a way to dismiss an argument or otherwise minimize the importance of something someone says, but semantics can be important to your website. Understanding semantics as it applies to HTML can save you time and money in the long run.

In web design, semantics is concerned with the meaning of the tags and attributes that you use to build your web pages. In other words, semantic HTML is HTML that contains meaning in and of itself, beyond any content that it might be marking up. Semantic HTML lets the browser understand what the tag contains, and so will you.

Here is a hypothetical example of HTML if it were written with all the tags differentiated by numbers:

<!tag1>
<tag2>
  <tag3>
    <tag4>Now is the Time</tag4>
  </tag3>
  <tag5>
    <tag6>Now is the Time</tag6>
    <tag7>For all good people…</tag7>
  </tag5>
</tag2>

This is pretty difficult to understand, right? Web browsers could have been programmed to read the above faux HTML just as easily as they read real HTML.

Here’s the same web page written in real HTML:

<!doctype html>
<html>
  <head>
    <title>Now is the Time</title>
  </head>
  <body>
    <h1>Now is the Time</h1>
    <p>For all good people…</p>
  </body>
</html>

This is much easier to read and understand, even if you don’t know HTML. You can make guesses about what the content is because of the HTML tags surrounding it. Let’s look at it line by line:

Line 1: <!doctype html> You may not know what the word “doctype” means, but if you were to guess, you might think it meant “document type” and this is followed by HTML. So this line probably means that the document is an HTML document.

Line 2: <html> Even if you didn’t understand the first line, this line confirms that we’re working with an HTML document.

Line 3: <head> This may not be clear immediately, but it obviously means something to do with the “head” of the document, perhaps the brains.

Line 4: <title>Now is the Time</title> This is the first really semantic tag you see in the document, even though the above tags are reasonably understandable. It’s clear that the title of the document is “Now is the Time.” This line also gives you a clue as to how HTML is structured, as you can see the closing tag right there.

Line 5: </head> We learned about closing tags in line 4, so it’s clear that this is the end of the head information for the page.

Line 6: <body> This is probably the beginning of the main focus or body of the web page.

Line 7: <h1>Now is the Time</h1> This is a repetition of the title, but the tags surrounding the text aren’t terribly clear. Once you understand HTML you’ll recognize this as a level 1 headline, but the semantics are poor on this tag.

Line 8: <p>For all good people…</p> This is another tag that you will recognize as semantic once you know HTML better. And it might be more obvious what it is in a longer page with more of them. This is a paragraph tag. It might have been more semantic if it was written <paragraph>.

Line 9: </body> Here we have the end of the body of the page.

Line 10: </html> And finally the end of the document itself.

As you can see, a tag like <body> has a lot more meaning in and of itself than <tag5>.

This is semantic HTML. Semantic HTML is HTML that provides meaning to the content it contains.

Why is Semantics Important for HTML?

Semantic HTML makes your web pages easier to read and understand. While most of your customers won’t ever see the HTML tags, the browsers will and they can make adjustments based on the tags to make the content display more effectively.

For example, in HTML 4, you could only embed video and audio using non-semantic <object> tags. The browser knew that the element was an object of some type, but not what it was.

An object could be almost anything, and the browser wouldn’t know until it started to try and display it. But with the new semantic <video> and <audio> tags the browser will know immediately what it has to download. If the browser doesn’t support video, it knows before it starts to download the file, which saves the customer time.

But semantics can also save you money. Web pages need to change to stay current. When a page is marked up semantically the next web designer to edit it can tell almost at a glance what the page has on it, without needing to read any of the content. This saves time, and gets the designs built more quickly, which saves money.

Plus, just like browsers, web designers can use semantic HTML to design their pages better. If you have code samples in your documents, you can add line numbers to them automatically if you use the <code> tag around them. You can put gorgeous graphical quotation marks around <blockquote> elements.

And there will probably be additional features that come out in the future for semantic elements. For instance, a tag like <address type="skype"> might allow for direct video calls embedded in web pages. Using semantic HTML tags future-proof your web designs and ensure that your meaning is understood.

Semantic HTML Tags in HTML5

The following table shows the semantic tags in HTML5.

<abbr>

Abbreviation

<address>

Address of the authors of the document

<article>

Article

<aside>

Tangential or content that is loosely related to the main content

Audio or sound file

Long quotation

Body of the document

Button or input tag

Canvas for animation or scripted content

<cite>

Citation

<code>

Code reference

<col>

Column in a table

<colgroup>

Group of columns

<datalist>

List of data for use in forms

Deleted text

Definition

Emphasis

Figure

Footer

First level headline

Second level headline

<h3>

Third level headline

<h4>

Fourth level headline

Fifth level headline

Sixth level headline

Head of the document

Header

Thematic break

HTML

Inserted text

Text to be entered by the user

<label>

Label

<legend>

Legend

<mark>

Content that has been marked in some way

<menu>

<meter>

A scalar measure

Form output

Paragraph

Pre-formatted text

Progress bar

Short inline quotation

Ruby annotation

Strikethrough

Sample output

Section

Small text

Strongly emphasized text

Subscript

Summary

Superscript

Title

Variable or user defined text

<video>

Video

Comments:

Atish - Sep 4, 2014

very well explained. I didn’t know some of the tags, thanks for providing the list.

Jennifer Kyrnin - Sep 4, 2014

You’re welcome. I’m glad you found it useful.

Basics of HTML5

Mon, 07 Jul 2014 13:00:15 +0000

HTML5 is no more difficult to learn than any other version of HTML. But there are a few things you can do to make it easier and more cost-effective to using it.

Start with the Doctype

The easiest way to start using HTML5 is to change the doctype you use in your documents. You can do this by simply making the first line of your HTML documents read:

<doctype html>

But if you use a WYSIWYG editor, you can also change it there. For example, in Dreamweaver CC, in the “New Document” window, you can choose HTML5 as the DocType from one of several choices. How to add the HTML5 doctype to a new Dreamweaver document In the CoffeeCup Web Editor, you use the template “HTML 5” when you’re opening a new document to create a new HTML5 document. How to add the HTML5 doctype to a CoffeeCup Web Editor page And many web editors these days default to HTML5. If you’re using an editor like Tummult Hype, Macaw, or CoffeeCup Responsive Design Layout Maker Pro you don’t have to worry about the doctype, as these editors use HTML5 automatically. Many modern web editors use HTML5 automatically.

Your First HTML5 Document

As I said above, all you need to have an HTML5 document is the correct doctype. But there are a few other tags that can help. Here’s a really basic HTML5 template that I start all my web pages with:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      My Title
    </title>
  </head>
  <body>
    Content goes here
  </body>
</html>

Change the highlighted lines to your own content

HTML5 is an Improvement to HTML 4.01

One question I get asked all the time is how difficult is it to learn HTML5 if you already know HTML 4.01 or any other version of HTML. The great news is that HTML5 isn’t really all that different from HTML 4.01. In fact, if all you do is add the doctype listed above and then writing your pages exactly as you did before, you will have joined the millions of designers using HTML5.

But one of the reasons to use HTML5 is because of all the improvements there are in it. There are dozens of new tags that add more functionality to your pages. None of the new tags are absolutely critical to any web page, but they add useful features that can enhance your pages and make them more useful to your customers.

Some of the tags I find most useful include:

The sectioning tags: <article>, <nav>, <footer>, etc.
Text semantics tags like <data> and <time>
Embedded content: <canvas>, <video>, and <audio>
The new forms tags and attributes

Learn about all the new HTML5 tags.

Scripting APIs Give You So Much More to Do On Your Sites

HTML5 offers a bunch of new APIs or application programming interfaces to help designers and developers offer more features on your websites.

Web Application APIs—these let your web pages act more like applications on a computer or tablet. There is support for error handling and events and can make your pages more interactive and useful.
Video and audio APIs—with more than just the <video> and <audio> tags, the new APIs help you to play back video and audio that are embedded directly in your web pages.
Offline web applications—this API helps you store information so that a customer using your web application on a mobile device doesn’t have to be connected to the internet to use the application.
Contenteditable—While Internet Explorer has supported this attribute for a few years, HTML5 has added an API to support it more widely.
Drag and Drop—This is a functionality that desktop applications have had for years, but until recently, web designers were stuck fiddling and futzing with different scripts to get drag and drop to work.
History API—Most people don’t understand the value of the History API because it’s not a visible functionality. But this API can make your web applications work more effectively by giving URIs to dynamic pages that don’t have URLs and changing the visible URL or any URIs in the history of the browser.

Where to Learn More About HTML5

There are lots of places online to learn HTML5, these are some of my favorite resources:

And of course, you can learn all about HTML5 from my book: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours.

Not all design testing tools are created equal

Fri, 16 May 2014 19:45:01 +0000

I’ve noticed lately a proliferation of websites like Responsive Design Testing Tool which claim to offer a way to test your responsive web designs in different browser or device widths. I happily began testing some of the pages I design and noticed that they didn’t look right—the designs weren’t responding to the width. After checking my CSS @media queries for errors I had an idea. Check the page on my iPhone.

Do you notice anything interesting about these four renderings?

If you go to the Responsive Design Testing Tool and put in a web page you know is responsive, you might notice something like what I saw in the screen shot above. What you’re seeing is the About.com home page rendered in four iframes at the four listed dimensions. If you look closely, you’ll notice that all four images in the frames are exactly the same size. This is because while the iframes loading the page are set to the width and height of the devices, the pages are rendering based on the browser window itself, not the iframe widths.

When I viewed the page on my iPhone the responsive features kicked in as they were supposed to and I saw the page as it was supposed to look.

Here’s what the page looks like on a real iPhone

As you can see, on a real iPhone the About.com logo is smaller and on the black background. The navigation has been reduced down to the icon. The headline and image are both fully visible. And there is no horizontal scrolling required. In other words, About.com modified the layout responsively based on the viewport of the iPhone.

Be Wary of Online Emulators

There are a number of sites like the Responsive Design Testing Tool that claim to be RWD testing tools, but in reality they are just iframe page loaders. And because most pages take their cue from the device window rather than a width set on an HTML element like an iframe, they just show the page as it would look on the browser it’s in.

I decided for the hell of it to see how About.com’s page would render in the iframes of the Responsive Testing Tool on my iPhone. Below is the result:

The Responsive Design Testing Tool on an iPhone

The immediate red flag for me when viewing this site on my iPhone was that the testing tool page itself made no effort to be responsive. You could argue that that’s because it really needs to be viewed on a desktop browser, but it was very difficult to scroll horizontally to see any of the iframes other than the 240x320 (small phone) frame. Other things I noticed were that the URL field did not use the URL input field, which made it slightly tougher to type in on my iPhone and it cut off the iframe completely on the right as you can see in the screen shot on the left.

All in all I wouldn’t trust this tool to do any testing on my websites. I’d be better off doing only testing on my browser and not worrying about mobile devices.

What Can You Use?

While online emulators might not be the best solution for testing responsive websites, you can use them to test non-responsive sites to see how your pages might render on a smaller screen device.

Another option you have for testing is to use an emulator. You can get an iPhone emulator from Apple and an Android emulator from Android.

Want to Learn more about Responsive Web Design?

Available Oct 2014

I am writing a book on responsive web design Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself. It is available now for pre-order on Amazon and other places where books are sold.

Comments:

David W - May 4, 2014

Thank you. I have been saying this for months. the problem seems to be the difference between max-width and max-device-width. If the latter is set, then the page will not render correctly in an iFrame set to a pixel size. I’m not sure it’s possible to fool the browser engine to accept a different screen size, the way you can fake a User Agent String. Great article Thanks David

Jennifer Kyrnin - May 5, 2014

Thanks! I was starting to wonder if I was the only person noticing this issue. :-) As so many of the testing sites use iframes and then all have this problem.

Playing with Zeen - I created an HTML5 magazine

Thu, 30 Aug 2012 03:38:28 +0000

[caption id=“attachment_490” align=“aligncenter” width=“757”] Latest issue of HTML5 Zine

I’ve been playing with the new webzine creation tool: Zeen. I’ve linked to several of my articles about HTML5 from About.com. I hope you enjoy my first issue.

I'm loving SVG

Tue, 03 Jul 2012 19:48:31 +0000

One of the great things about HTML5 is that there is a proposal in the W3C to allow HTML5 and XHTML to include SVG inline in the documents. But what’s especially great is that if you’re using a modern browser (IE 9+, Firefox, Safari, Chrome, or Opera) you can embed SVG graphics in your HTML5 documents quickly and painlessly.

I am loving SVG because I don’t have to learn anything new. I can simply create vector graphics in Adobe Illustrator and then embed the SVG code into my HTML like I would any other image or embedded element. I don’t even have to use any special tags to call it out, I just paste everything from the starting <svg> tag to the closing </svg> tag.

Here’s an example. Note, I have added a <switch> tag to call a fallback image if your browser doesn’t support inline SVG. This might result in you seeing the image twice, but I hope not. :-) If, when you right-click on this graph, you see a PNG image, then you’re seeing the fallback image.

[iframe_loader src=“https://www.html5in24hours.com/examples/inline-svg.html" height=“310”]

If you look at the HTML for that image, you’ll see a lot of <g> and <path fill="#FED7B8" d="M149.878,150.489l52.584,112.768c-62.28,29.041-136.311,2.097-165.353-60.184 c-14.521-31.14-15.905-62.854-4.154-95.141L149.878,150.489z"/> and other stuff that might look like gobbledygook, but it’s all SVG, and I didn’t have to come up with any of it. My program, Illustrator, did all the heavy lifting.

The ability to add smooth, crisp vector images to my HTML pages is a huge benefit to using HTML5. I hope that we see more of this type of graphics in the future.

Comments:

Beth - Jul 4, 2012

Love getting your helpful hints.

Stan - Jul 0, 2012

Just starting to learn into this Canvas/HTML5 & need more patience for better understanding. Sounds very positive & looks good! Thanks for this kick-start help. God bless! Stan from Windhoek

Bob - Sep 2, 2012

Stan, Canvas/HTML5 and SVG are different. Canvas is a raster image while SVG is a scalable image.

What is ugly HTML?

Thu, 28 Jun 2012 00:02:11 +0000

Yesterday, someone asked me the question:

“What is ugly HTML?”

And I realized that this isn’t necessarily an obvious thing. HTML is often ugly simply because of how it looks, this mostly centers around readability for me:

All one line and/or minified This is very popular with minimalists and people who are very concerned with the speed of their pages. Minifying the code is a technique to remove all extraneous spaces, new lines, and characters to keep the HTML as small and streamlined as possible. Yes, this does speed up the pages, and I even recommend that you do it, but I really hate looking at it. It’s ugly.
Too little formatting (and too much) By formatting, I mean the tabs and new lines that make the HTML easier to read. This is similar to the first item in this list, but I think we should take this further and include too much formatting as well. I have seen pages where there are two or three nested tables, and every single table row and column is indented from the container. This can get insanely hard to read after a while. e.g.

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> …

All caps HTML Yes, this is valid in HTML5 (and HTML 4), but it’s ugly and hard to read. I think some people do it so that they can see the tags more quickly, but although you can see the tags, it’s hard to differentiate them at times. I recommend avoiding all caps for headlines because they are hard to read, and the same goes for HTML tags. If you need to edit the HTML later, it can be that much harder to find the problem if they are all in capital letters.
Invalid HTML This is the ugliest HTML of all because it can make a page show up incorrectly at the most inopportune times. It’s not a difficult thing to validate your HTML (I like the W3C validator, myself) and this can save you so much time in the future.

Then there is the ugly HTML because it’s using old-fashioned methods:

Too many DIVs It’s like when people learned CSS for layout they only learned to put the CSS on one tag – the DIV element. So every block of text, every image, everything on the page is surrounded by one or more DIVs. Yes, this is technically correct. Yes, it works. But man, it’s ugly. It provides no extra information about the content beyond that it’s a block that might have some styles applied to it. I particularly hate when they add the styles to a DIV that is surrounding another, perfectly functional block-level element like a UL element. Why not style the UL? Save yourself a few characters!
I hate it when people add spaces using Just like the above, it works, and it makes the page look like you want, but really, that’s what CSS is for. There is this wonderful property: margin, that you can use to set the margins around any element – and rather than relying on the space set by a paragraph tag, you can define it to exactly the size you want.
I hate it even more when people use tons of <BR> elements in a row

Yes, it shoves things down, but just like the above item, the margin property works better and takes up less download time.
Hiding content in strange places One site I visited once used the title attribute as a way to hide content. When you moused over certain sections of the page, the title content would show up. But the browser I was using showed the title content in a little yellow box as well, often covering the very content that the designer was trying to place. Use JavaScript and place the content in the page. HTML5 even offers a hidden attribute that you can toggle on and off if you want the content to appear and disappear.

What do you think makes ugly HTML? Or does the HTML not matter as long as the page looks good?

Comments:

Sofia Khatoon - Oct 5, 2012

Thanks for a wonderful book on this topic. Just noticed spelling “Reset Default Foont Size” in companion web site on Hour 6. Also wanted to ask if you can share samples of styles-320.css which makes the puzzle page appear in two column in the book.

Jennifer Kyrnin - Jan 5, 2013

I’ll look for these and get them up on the site. Thanks for the compliment.

Learn the HTML Elements Removed from HTML5

Tue, 17 Apr 2012 20:45:17 +0000

There are several HTML 4 elements that have been removed from HTML5. In order to use HTML5 correctly, you should stop using these elements.

In HTML 4 elements that removed from the specification are “deprecated,” but in HTML5 they are “obsolete.” The difference is that in HTML 4, deprecated elements should be removed from support by browsers. While in HTML5 obsolete elements are ones that may still be supported by browsers, but it that designers use other technology instead.

HTML Elements Removed from HTML5

acronym You should use the abbr element instead.
applet Instead of this tag, you should use the embed element or the video and audio elements.
basefont You should set font properties with CSS.
big This tag has no semantic value, and so you should define the styles in the CSS.
center You should center with CSS.
dir You should use the appropriate unordered or ordered list instead.
font You should set font properties with CSS.
frame Replace frames with iframe or converted to non-framed sites.
frameset Replace frames with iframe or converted to non-framed sites.
noframes Replace frames with iframe or converted to non-framed sites.
strike Replace this tag with either the s element if the text is no longer accurate, with the del element if the text has been removed, or with CSS if the line through the text is just stylistic in nature.
tt Define the font styles with CSS.

Learn the New HTML5 Elements

Tue, 17 Apr 2012 17:57:12 +0000

One of the first things you want to learn when you start learning HTML5 are the new elements. There are several new HTML5 elements to add new features and functionality to HTML5.

New HTML5 Elements

Document Metadata

meta charset
This is a new, shortened form of the character set meta data. It was added to the specification because web designers were writing the original character set meta tag incorrectly and browsers were supporting it.

Sections

section
A discrete section of the document.
nav
Navigation.
article
An article or page section that could be syndicated.
aside
A page section that is tangentially related to either the current page or the site as a whole.
hgroup
A group of headings.
header
The header information for a section or page.
footer
The footer information for a section or page.

Grouping Content

figure
Content that is self-contained and referenced as a single unit within the flow of the page.
figcaption
A caption for a figure.

Text-level Semantics

data
Contents that have a machine-readable format that is defined in the value attribute.
time
A date or time with a machine-readable format defined in the datetime attribute.
mark
A block of text that is highlighted for some purpose beyond the context of the current page.
ruby
Ruby annotation used in some double-byte languages.
rt
Ruby text.
rp
Ruby parenthesis.
bdi
A span of text separate from the page contents for bi-directional formatting.
wbr
A line break opportunity.

Embedded Content

embed
The insertion point for embedded content.
video
An embedded video with it’s associated source files and language tracks.
audio
An embedded audio file with it’s associated source files.
source
Source file for embedded video or audio.
track
Supplementary tracks for captioning or secondary audio tracks on videos.
canvas
A scriptable bitmap area for creating images and animations on a web page.

Forms

input type=search
A search box text field.
input type=tel
A telephone number input field.
input type=url
A URL input field.
input type=email
An email address input field.
input type=datetime
A date and time input field.
input type=date
A date input field.
input type=month
A month input field.
input type=week
A week of the year input field.
input type=time
A time input field.
input type=datetime-local
A local date and time input field.
input type=number
A number input field.
input type=range
An inexact number input field.
input type=color
A color input field.
datalist
A list of pre-defined options for an input field.
keygen
A key pair generator control.
output
Scripted form output.
progress
The completed progress of a task.
meter
A scalar value within a known range.

Interactive Elements

details
An element where the user can get additional information.
summary
A caption or legend explaining the parent details element.
command
A command that the user can invoke.
menu
A list of commands.
dialog
A part of an application that the user interacts with such as a dialog box.

HTML5 Video Codec Wars

Sat, 17 Mar 2012 14:50:02 +0000

One of the reasons many people dislike HTML5 video is because you have to encode the video in multiple codecs to work on multiple browsers. In fact, in an article I just read that was one of the reasons to hate HTML5. He said, if you have to encode it in flash to support IE why bother doing anything else.

Well I’m on an iPad and my answer to that is, if you don’t encode it in something other than flash, I won’t be able to view it. And whether you like it or not, the iPad and other mobile devices are becoming more important.

But that’s not what I want to talk about today. The reason people don’t like HTML5 video is because there are so many codecs. Which wouldn’t be so bad except that you have to encode your video in all of them, to support the majority of browsers. That means webM, ogg Theora, H.264 and flash. And then the Mozilla organization announced they would be supporting H.264.

Does this bother you? Many people see it as Mozilla caving in. After all H.264 still has a patent surrounding it and so Mozilla is no longer supporting their goal of an open web.

I applaud Mozilla for trying to keep that goal of an open web. But ultimately I think they need to change and go with the codec that most people are using, H.264. Because without a video codec that most people use Mozilla and their browser Firefox become less viable in the marketplace. And with fewer browser manufacturers, the remaining ones will feel less and less pressure to go along with consumer needs for the browsers.

In fact, I believe if Firefox had not added support for H.264 they would not succeed on the mobile browsers as a viable alternative.

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.

Using HTML5 Video and Audio

Fri, 21 Oct 2011 19:10:03 +0000

On my About.com site I wrote an 11-page article explaining how to add video using HTML5 with fallback options for Internet Explorer. I also have a similar (although a lot shorter) article on how to add sound with HTML5. And I get a lot of emails about them saying “I tried this in _____ browser and it didn’t work.” And I’m expecting to get the same type of feedback from chapter 12 when the book comes out.

Now, I admit, I am human. I make mistakes and things get munged in publishing and so on. I tested both the articles on About and the chapter code extensively, as did my technical editors. And I’m confident that it works in modern web browsers, even Internet Explorer.

Follow the Steps Precisely

The video article is especially tough because it’s so long. Who wants to wade through 11 pages of stuff just to post a video? Wouldn’t we all rather be shooting our films instead? But none of the pages are in there as fluff. If you want your video to work in modern HTML5 compliant browsers as well as Internet Explorer 8, then you need to read and do them all. And I can tell by my statistics that people aren’t doing that. In fact, while the first most popular page is page 1, the next most popular is page 5. Page 9 (where you make it compliant with IE) is only 1/2 as popular as page 5.

The thing is—this stuff is very picky. You have to follow the steps exactly, or it won’t work. In fact, it took me a long time and many trials and lots of errors before I could get it working well enough to write the articles and chapter. This means that it can be very frustrating.

In my opinion, the frustration is made up for by the benefits you get from using HTML5 for video and audio. You may disagree.

And if You Do Find an Error…

Please let me know. As I said above, I’m human, and I do make mistakes. But I can’t fix them if I don’t know about them, and since I tested it I think it works as I wrote it. So I don’t know about any errors. Please don’t hesitate to let me know about problems with the articles or the book when you find them. I’d really appreciate it and it might even help you get your video and audio working!

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.

YouTube delivers WebM video

Wed, 20 Apr 2011 20:42:40 +0000

The YouTube blog announced yesterday that they are now serving videos in the WebM format. They will continue to support H.264, and they are committed to continuing to develop their HTML5 player. You can join the HTML5 player trial at their site.

I’m curious, what video format would you like to see win? [poll id=“2”]

Picking the Right Video Player for Your HTML5 Video

Sun, 17 Apr 2011 19:24:57 +0000

Unfortunately, while HTML5 brings us a much easier way to embed videos into your web pages, but because of many factors, it still(!) isn’t possible to just drag your video into the video tag and then slap it up on the web. By using a player you can get your HTML5 video up and running quickly.

But which player should you choose?

Philip Bräunlich has you covered! He’s created a chart of (currently) 20 different HTML5 video players, along with details like: what license they are released under, if they have a Flash fallback for non-HTML5 compliant browsers (darn you IE8!), and other features. I especially like that he evaluates how easy or hard they are to implement (for example, OSM Player is “hell no” not easy to integrate).

Right now, none of the players support every feature he’s evaluating, but it certainly is a lot easier to use these players with the features you need or want than it is to roll your own.

What’s your favorite HTML5 video player? Let us know in the comments!

HTML5 Tutorials on HTML5 in 24 Hours

Do Hackers Care About Your Meta CharSet?

Cross-Site Scripting (XSS) Attacks

The UTF-7 Attack and How to Protect Your Site

Why Define the Character Set?

Do I Have to Use UTF-8 in the Meta Charset?

This is Not the Final Word on XSS Protection

HTML5 Cheat Sheet

HTML5 Cheat Sheet PDF

Comments:

The Lazy Way to Mobile-Friendly

Or How I Made a Simple Change on a Bootstrap Site to Please Google

What To Do to Make Your Site Mobile Friendly

More Help with Bootstrap, Mobile-Friendly Design, RWD, and Google’s Change to Search Results

How to Speed Up Your Website with GZip Compression

How to Compress a Website with GZip and HTaccess

Compress Files on Apache

If Your Apache Site Still Isn’t Compressed

Compress Files on IIS

I don’t have an IIS server, so I cannot tell you exactly how to do it, but Microsoft has a comprehensive Technet document: Configuring HTTP Compression in IIS 7 that covers: configuring compression, enabling compression of dynamic content, and enabling compression of static content.

Comments:

What Semantics Means in HTML and Why You Should Care

What is Semantics?

Why is Semantics Important for HTML?

Semantic HTML Tags in HTML5

Comments:

Basics of HTML5

Start with the Doctype

Your First HTML5 Document

HTML5 is an Improvement to HTML 4.01

Scripting APIs Give You So Much More to Do On Your Sites

Where to Learn More About HTML5

Not all design testing tools are created equal

Be Wary of Online Emulators

What Can You Use?

Want to Learn more about Responsive Web Design?

I am writing a book on responsive web design Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself. It is available now for pre-order on Amazon and other places where books are sold.

Comments:

Playing with Zeen - I created an HTML5 magazine

I'm loving SVG

The ability to add smooth, crisp vector images to my HTML pages is a huge benefit to using HTML5. I hope that we see more of this type of graphics in the future.

Comments:

What is ugly HTML?

What do you think makes ugly HTML? Or does the HTML not matter as long as the page looks good?

Comments:

Learn the HTML Elements Removed from HTML5

HTML Elements Removed from HTML5

Learn the New HTML5 Elements

New HTML5 Elements

Document Metadata

Sections

Grouping Content

Text-level Semantics

Embedded Content

Forms

Interactive Elements

HTML5 Video Codec Wars

The TIME Element Has Been Removed in Favor of DATA

The DATA Element Replaces the TIME Element

How This Affects the Book

Using HTML5 Video and Audio

Follow the Steps Precisely

And if You Do Find an Error…

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:

YouTube delivers WebM video

Picking the Right Video Player for Your HTML5 Video

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!