What is ugly HTML?

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&nbsp;
    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?

Learn the HTML Elements Removed from HTML5

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

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.

Drag and Drop upload–the final step

Many tutorials on drag and drop with HTML5 do everything but e actual upload step. This is because that step requires server interaction and scripting–you can’t just use JavaScript. But the HTML5 Doctors have a way to use XHR2 (xmlHttpRequest) to get the upload done too! Drag and Drop and Automatically Send to Server

The TIME Element Has Been Removed in Favor of DATA

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.

Do you want to solve an HTML5 puzzle?

HTML5 Drag and Drop PuzzleI’ve been working on HTML5 drag and drop this week, and I’ve created a simple puzzle that you can play with in any HTML5 browser:
HTML5 Drag and Drop Puzzle

Yes, it’s a pretty easy puzzle, but I do like this photo of my dogs. And it shows you how you can implement HTML5 drag and drop. The full instructions will be in Hour 16 of the book