Semantic multiple choice


Question

Which is a more semantically correct markup element for a “terms of use” agreement?

  1. A textarea form element,
  2. a div with scrollbars, or
    The services that CompanyName provides to you are subject to the following Terms of Use ("TOU"). CompanyName reserves the right to update the TOU at any time without notice to you. The most current version of the TOU can be reviewed by clicking on the "Terms of Use" hypertext link located at the bottom of our Web pages. Through its network of Web properties, CompanyName provides you with access to a variety of resources, including developer tools, download areas, communication forums and product information (collectively "Services"). The Services, including any updates, enhancements, new features, and/or the addition of any new Web properties, are subject to the TOU. Unless otherwise specified, the Services are for your personal and non-commercial use. You may not modify, copy, distribute, transmit, display, perform, reproduce, publish, license, create derivative works from, transfer, or sell any information, software, products or services obtained from the Services.
  3. an iframe?

They all look the same because CSS allows us to style all elements. Once again, the choice should not be how an element looks, only what it means.

Don’t scroll down until you have thought about the answers and made your decision.























































Solution?

The following is fact mixed with a healthy amount of author opinion. Take it how you like: spoonful of sugar or straight-up.

  1. I can safely say the first answer is completely wrong. It’s also the most widely used. Being a form element, the textarea element triggers forms mode in screen readers and can severely confuse users. It also limits the contents to plain text where the other options could have multiple pragraphs, headings, links, etc.
  2. The div solution would be my choice. It’s plain document text, so it will work in every browser, and you get the scroll effect in browser versions 5.0 and up. This solution can also handle child elements like multiple paragraphs, headings, and links.
  3. The iframe choice is partially acceptable as well. It is a valid use and can also handle child elements. The reasons I’d recommend against it are that it doesn’t work in older browsers and frames have been deprecated from the XHTML specification. We won't get into the reasons against frames, but they are numerous.

Just for your information, here are the elements in their default (unstyled) forms. Actually the iframe still has style (font-size and background-color) defined in it’s source file.

  1. A textarea form element,
  2. a div with scrollbars, or
    The services that CompanyName provides to you are subject to the following Terms of Use ("TOU"). CompanyName reserves the right to update the TOU at any time without notice to you. The most current version of the TOU can be reviewed by clicking on the "Terms of Use" hypertext link located at the bottom of our Web pages. Through its network of Web properties, CompanyName provides you with access to a variety of resources, including developer tools, download areas, communication forums and product information (collectively "Services"). The Services, including any updates, enhancements, new features, and/or the addition of any new Web properties, are subject to the TOU. Unless otherwise specified, the Services are for your personal and non-commercial use. You may not modify, copy, distribute, transmit, display, perform, reproduce, publish, license, create derivative works from, transfer, or sell any information, software, products or services obtained from the Services.
  3. an iframe?