| home / html / refactoring_html2 |
[previous] [next] |
|
|
|
Change elements such as <br> to <brclass='empty'/>.
XML parsers require that every start-tag have a matching end-tag. There can be no
without a corresponding </p>. Similarly, there can be no
without a corresponding </br>. Alternatively, you can use empty-element tag syntax, such as <br/> and <hr/>. This is usually simpler for elements that are guaranteed to be empty and more compatible with legacy browsers.
Although most modern browsers have no problem with empty-element tags, a few older ones youll still find installed here or there, such as Netscape 3, do. For example, some will treat <br/> as an element whose name is br/ and will not insert the necessary break. Others will take <br></br> as a double break, rather than a single break. The content will still be present, but it may not be styled properly.
Classic HTML defines 12 empty elements:
|
In addition, a few other elements from various proprietary browser extensions may also appear:
|
Although XML and XHTML allow these tags to be written either with a start-tag/end-tag pair such as
or with an empty-element tag such as
, the latter is much friendlier to older browsers and to human authors. Theres little reason not to prefer the empty-element tag.
However, even an empty-element tag such as
can confuse some older browsers that actually read this as an unknown element with the name br/ instead of the known element br. Maximum compatibility is achieved if you add an attribute and a space before the final slash. The class attribute is a good choice. For example:
I picked emptyas the class to be clear why I inserted it. However, the value of the class attribute really doesnt matter. If you have reason to assign a different class to some or all of these elements, feel free.
TagSoup and Tidy will convert these elements as part of their fix-up. However, neither adds the class="empty" attributes. You can add those with an extra search and replace step at the end, or you can just make the entire change with search and replace. I would start with the
element. You can simply search for all <br> tags and replace them with <br class="empty" />.
However, there are a few things to watch out for. The first is whether someone has already done this. Check to see whether there are any </br> elements in the source. If any appear, first remove them, as theyre no longer necessary.
The remaining concern is br tags with attributes, such as
. You can find these by searching for <br.
If there arent too many of these, I might just open the files and fix them manually. If there are a lot of them, you can automate the process, but this will require a slightly more complicated regular expression. The search expression is:
The replace expression is:
When you're done, run your test suite to make sure all is well and you havent accidentally broken something.
The hr element is handled almost identically. The meta and link elements are trickier because they almost always have attributes, so you need to use the more complicated form of the regular expressions. Of course, Tidy and TagSoup are also options.
| home / html / refactoring_html2 |
[previous] [next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
URL:
