HTML 5: The l (line) element

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

HTML 5: The l (line) element

Dave Hodder

Please consider adding the 'l' element (as found in XHTML 2).

The 'l' element can be used to break up text into separate lines, in a
similar manner to the existing 'br' element.  Unlike 'br', it is a
container element; instead of "<p>Line 1<br>Line 2</p>", one would type
"<p><l>Line 1</l><l>Line 2</l></p>".  The main advantage of 'l' is
presentational -- it becomes much easier to colour lines differently, to
add automatic line numbers, etc.

Example:

     <!DOCTYPE html>
     <html lang="en-GB">
      <head>
       <title>&lt;l&gt; Demonstration</title>
       <style type="text/css">
        label { float: left; width: 8em }
        l { display: block }
        l :nth-child(odd) { color: #000; background: #EFF }
        l :nth-child(even) { color: #000; background: #FEE }
       </style>
      </head>
      <body>
       <form method="post" action="/profiles">
        <p>
         <l><label for="forename">Forename:</label>
          <input type="text" id="forename" name="forename"
           size="50" maxlength="50" /></l>
         <l><label for="surname">Surname:</label>
          <input type="text" id="surname" name="surname"
           size="50" maxlength="50" /></l>
         <l><label for="foo">Foo:</label>
          <select id="foo" name="foo">
           <option value="bar">Bar</option>
           <option value="baz">Baz</option>
           <option value="qux">Qux</option>
          </select></l>
         <l><label for="arfle">Arfle:</label>
          <select id="arfle" name="arfle">
           <option value="barfle">Barfle</option>
           <option value="gloop">Gloop</option>
           <option value="glorp">Glorp</option>
          </select></l>
         </p>
        </form>
       </body>
     </html>

As far as the web developer community is concerned, I don't believe
adapting to use <l> would prove any more challenging than, for example,
adapting to use <section>.

Thank you,

Dave

P.S. One line of JScript is required to coax current versions of
Internet Explorer into parsing the tag:

     <!--[if lt IE 8]><script type="text/javascript">
       document.createElement('l');  // Register 'l' element within IE
     </script><![endif]-->

Reply | Threaded
Open this post in threaded view
|

Re: HTML 5: The l (line) element

Frank Ellermann

Dave Hodder wrote:
 
> Please consider adding the 'l' element (as found in XHTML 2).

So far I thought XHTML 2 is designed to be transformed into
something "visible" with browsers on the side of the server,
while HTML5 wishes to *be* this client-"visible" something.  

In other words introducing backwards incompatible "features"
needs compelling reasons, with <del> and <tfoot> as examples
how to drop the ball.

> instead of "<p>Line 1<br>Line 2</p>", one would type
> "<p><l>Line 1</l><l>Line 2</l></p>".

IMO not compelling, and it won't work in almost all browsers.

> <form method="post" action="/profiles">
> <p>
>    <l><label for="forename">Forename:</label>
>       <input type="text" id="forename" name="forename"
>              size="50" maxlength="50" /></l>
>    <l><label for="surname">Surname:</label>
>       <input type="text" id="surname" name="surname"
>              size="50" maxlength="50" /></l>
[...]

Could <ul><li>...</li><li>...</li></ul> do what you want ?
validator.nu accepts <ul><li> instead of <p><l> for your
example, claiming that size="50" is invalid in HTML5.

Unfortunately "size" is yet another REQUIRED feature for
backwards compatibility, your size=50" is a decent value
for such old browsers.  
   
> I don't believe adapting to use <l> would prove any more
> challenging than, for example, adapting to use <section>.

I didn't look into many proposed new features for HTML5 so
far, maybe a <section> is not much better than <l>.  IIRC
XHTML 2 has no <i>, but HTML5 does.  Having <i> *and* <l>
is not nice.

> <!--[if lt IE 8]><script type="text/javascript">
>  document.createElement('l');  // Register 'l' element within IE
> </script><![endif]-->

A feature requiring enabled Javascript in some browsers
might delight the double-tracker-ping-analytics fans. :-(
 
 Frank


Reply | Threaded
Open this post in threaded view
|

RE: HTML 5: The l (line) element

David Bailey-6
In reply to this post by Dave Hodder

This sounds like an good idea and I can see a number of uses, not least
the example you gave.  My only issue is that this functionality could be
reproduced with <span>, or the <ul><li> combo and a CSS rule to remove
list-style formatting, or by separating lines into individual
paragraphs:

http://users.bathspa.ac.uk/baid1/personal/clean-css-form.html

... the question is, which method has the most semantic meaning?  Would
a screen reader client differentiate <l> from <span>, <p> or <ul><li>
when annunciating/pronouncing the text?  How does this add meaning to
the page when analysed by a search engine?

Regards,


--
David Bailey,
Bath Spa University - Web Manager.


-----Original Message-----
From: [hidden email]
[mailto:[hidden email]] On Behalf Of Dave Hodder
Sent: 17 February 2008 21:07
To: [hidden email]
Subject: HTML 5: The l (line) element


Please consider adding the 'l' element (as found in XHTML 2).

The 'l' element can be used to break up text into separate lines, in a
similar manner to the existing 'br' element.  Unlike 'br', it is a
container element; instead of "<p>Line 1<br>Line 2</p>", one would type
"<p><l>Line 1</l><l>Line 2</l></p>".  The main advantage of 'l' is
presentational -- it becomes much easier to colour lines differently, to
add automatic line numbers, etc.

Example:

     <!DOCTYPE html>
     <html lang="en-GB">
      <head>
       <title>&lt;l&gt; Demonstration</title>
       <style type="text/css">
        label { float: left; width: 8em }
        l { display: block }
        l :nth-child(odd) { color: #000; background: #EFF }
        l :nth-child(even) { color: #000; background: #FEE }
       </style>
      </head>
      <body>
       <form method="post" action="/profiles">
        <p>
         <l><label for="forename">Forename:</label>
          <input type="text" id="forename" name="forename"
           size="50" maxlength="50" /></l>
         <l><label for="surname">Surname:</label>
          <input type="text" id="surname" name="surname"
           size="50" maxlength="50" /></l>
         <l><label for="foo">Foo:</label>
          <select id="foo" name="foo">
           <option value="bar">Bar</option>
           <option value="baz">Baz</option>
           <option value="qux">Qux</option>
          </select></l>
         <l><label for="arfle">Arfle:</label>
          <select id="arfle" name="arfle">
           <option value="barfle">Barfle</option>
           <option value="gloop">Gloop</option>
           <option value="glorp">Glorp</option>
          </select></l>
         </p>
        </form>
       </body>
     </html>

As far as the web developer community is concerned, I don't believe
adapting to use <l> would prove any more challenging than, for example,
adapting to use <section>.

Thank you,

Dave

P.S. One line of JScript is required to coax current versions of
Internet Explorer into parsing the tag:

     <!--[if lt IE 8]><script type="text/javascript">
       document.createElement('l');  // Register 'l' element within IE
     </script><![endif]-->


Reply | Threaded
Open this post in threaded view
|

Re: HTML 5: The l (line) element

Dave Hodder
In reply to this post by Frank Ellermann

Frank Ellermann wrote (with snippage):
>
> So far I thought XHTML 2 is designed to be transformed into
> something "visible" with browsers on the side of the server,
> while HTML5 wishes to *be* this client-"visible" something.  

I don't believe XHTML 2 was ever intended to be limited to use as a
server-side technology; it's simply much easier to use it that way today.

>> instead of "<p>Line 1<br>Line 2</p>", one would type
>> "<p><l>Line 1</l><l>Line 2</l></p>".
>
> IMO not compelling, and it won't work in almost all browsers.

With the CSS provided (specifically "l { display: block }") it works in
Firefox, Safari, Opera, Camino, SeaMonkey, etc.  With the additional
JScript it works in Internet Explorer too.  It obviously won't work in
the current crop of browsers that don't utilise CSS, such as Lynx.  I've
not tried it within any NetFront-based browsers (e.g. PlayStation 3).

Whilst the use of scripting to build in HTML 5 features isn't entirely
ideal, it's a pragmatic way of supporting current browser
implementations rather than abandoning them when fully HTML 5-compatible
browsers become available.

> Could <ul><li>...</li><li>...</li></ul> do what you want ?
> validator.nu accepts <ul><li> instead of <p><l> for your
> example, claiming that size="50" is invalid in HTML5.

 From a CSS point of view, yes <ul> and <li> could be used to create the
same visual effect.  From a semantic point of view, however, it doesn't
feel quite right -- I want to express lines within a form, and I don't
think of them as "list items" within an unordered list.  (Thanks for
pointing out my use of the 'size' attribute.)

> I didn't look into many proposed new features for HTML5 so
> far, maybe a <section> is not much better than <l>.  IIRC
> XHTML 2 has no <i>, but HTML5 does.  Having <i> *and* <l>
> is not nice.

If it proves to be a problem renaming it to <line> might be a solution.

Regards,

Dave

Reply | Threaded
Open this post in threaded view
|

Re: HTML 5: The l (line) element

Dave Hodder
In reply to this post by David Bailey-6

David Bailey wrote:
> This sounds like an good idea and I can see a number of uses, not least
> the example you gave.  My only issue is that this functionality could be
> reproduced with <span>, or the <ul><li> combo and a CSS rule to remove
> list-style formatting, or by separating lines into individual
> paragraphs:
>
> http://users.bathspa.ac.uk/baid1/personal/clean-css-form.html

In practice when I use HTML today I use the 'p' element, much as you
have in your example above.  Looking at the results on screen, however,
I suspect very few regular people would think of them as "paragraphs" --
they're lines within a form, hence the 'l' element.  I've seen people
use the <ul><li> approach too, but I think it stretches the definitions
a bit too far.

(I'd have a preference for using the semantically meaningless block
element <div> over its cousin, the semantically meaningless inline
element <span>, simply because of what happens when you turn CSS off
(View > Page Style > No Style within Firefox) or when you view from a
text-only browser such as Lynx.)

> ... the question is, which method has the most semantic meaning?  Would
> a screen reader client differentiate <l> from <span>, <p> or <ul><li>
> when annunciating/pronouncing the text?  How does this add meaning to
> the page when analysed by a search engine?

With the use of <p> I believe screen readers usually pause in their
speech; with <li> they announce "Item!" or similar, which isn't
particularly useful when you're trying to navigate through or fill in a
form.

Thanks,

Dave

Reply | Threaded
Open this post in threaded view
|

Re: HTML 5: The l (line) element

Frank Ellermann
In reply to this post by Dave Hodder

Dave Hodder wrote:

> It obviously won't work in the current crop of browsers that don't
> utilise CSS, such as Lynx.

Plus older browsers not supporting CSS at all, or an old vision of
CSS where users better disable it. ;-)  

> From a CSS point of view, yes <ul> and <li> could be used to
> create the same visual effect.  From a semantic point of view,
> however, it doesn't feel quite right -- I want to express lines
> within a form, and I don't think of them as "list items" within
> an unordered list.

After all these years of "table layout is evil" brain washing I
tend to forget that tables with a single column can be fine, and
then "rows" can be "lines".  Your odd/even line colouring magic
should also work for rows.

> Thanks for pointing out my use of the 'size' attribute.

Oops, credits to validator.nu.  I said 'size' is *required* for
old browsers, no matter what the current "HTML5" draft proposes.

 [<i> vs. <l>]
> renaming it to <line> might be a solution.

If it's semantically almost the same as a table with one column
not adding it to the "HTML5" tag soup is also attractive. <gd&r>

 Frank