What would you do about pathethic HTML / CSS markup?

@waxdocFeb 01.2013

Am I sounding like a hyper-critical, cruel, rude, know-it-all? Hope not. But I freaked out when seeing the following code online. Would appreciate comments, suggestions, solutions to correct my assumptions/observations below.

[code] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <title>temporary bios test page</title>’ <!– PageID 13628 – published by Open Text Web Solutions 10.1 – 10.1.2.321 – 35513 –> . . . <link type=”text/css” href=”/styles.css” rel=”StyleSheet” /> … <style> </style> . . . <style>.serif { font-family:”Times New Roman”,Georgia,Serif; }</style> </head> </head> <body> <div class=”columnSecondary”> </div> <div class=”columnPrimary”> <ul class=”navigationContextual”> <li>> . . .</li> </ul> </div> <!–*****BEGIN MAIN CONTENT AREA*****–> <div class=”mainContent”> <ul class=”navigationAncestors”> <li>/ . . . </li> </ul> <h1 class=”subHeader” id=”printHeader”>temporary test page</h1> <div class=”bodyCopy”> <div id=”printContent”> This page is being updated. More to come.

test page Biographies:

Firstbio Person I received . . . from . . … . My advice . . . career.

Secondbio Person My name is Secondbio Person. I received a BFA . . . … Society. I currently . . . . my own design styles. My advice . . .. Please take a look For making . . . <a href=”http://…”>http://…</a> For making …<a href=”http://…”>http://…</a>

Thirdbio Person My name is BIO Person,. . . classes. My main goal . . . animation field. My advice . . . result, Google it! Some of the websites I find useful are: <a href=”http://www.w3schools.com”>http://www.w3schools.com/</a> This site . . .codes. <a href=”http://library.creativecow.net”> <a href=”http://library.creativecow.net/ “>http://library.creativecow.net/ </a></a> This site . . .video content. <a href=”http://www.javascriptlint.com/online_lint.php”>http://www.javascriptlint.com/online_lint.php</a> This website . . . Google.com Trust me…. . .I rely on.

Fourthbio Person My name is Fourthbio Person, . . . .Design courses. I love … ,. . .passionate about. My advice . . . enjoy yourself!

Fifthbio Person I have a BS . . .in nature-oriented activities. My advice . . .enjoy.

Sixthbio Person I received a BS and MS in … . . . , … courses. My advice . . .ask for help!

Seventhbio Person My name is Seventhbio Person. . . . math courses at …. My interests . . .with analytical and problem solving skills. My advice . . . their majors.

</div> </div> </div> <!–*****END MAIN CONTENT AREA*****–> <!–*****END STANDARD CONTENT PAGE*****–> </body> </html> [/code]

The above is not from an individual seeking help or a small school. This is the output of a major USA university with several campuses and a large pool of resources (including Web-savvy staff, faculty, students, alumni). This particular campus prides itself in offering communications and 6 or more Website-design or Web-page-construction courses

How did such illogical, inaccessible, inefficient and flat-out incorrect (e.g., tag nesting) mark-up slip through?

to post a comment

CSS

11 Comments(s) _↴

@waxdocauthorFeb 01.2013 — #It has become a festering problem because concerned students were summarily dismissed when they tried to call attention to flaws that would become a nightmare to correct.

The above markup excerpt is from a big, complicated Website with a big, complicated linked external CSS document -- which might intimidate a low-level student clerk charged with inputting text. However, note that the page already contains two embedded <STYLE> sections</STYLE>.

It would be hoped that even a rank-beginner novice would know: embedded <STYLE> rules </STYLE> only affect that particular page; contextually-defined rules make style even more specific; inline style attributes are least efficient but can be applied to any tag; HTML content markup should be semantic and logical; CSS style rules should make HTML markup as clear and clean as possible; multiple space-separated class definitions can be applied to same element; sections should be distinguished by logical semantic headings ... . Anybody familiar with a word-processing or typography/layout program should recognize the benefit of defining and applying a set of styles to an easily-distinguished identifying element, which would make find/replace more efficient.

The excessive style attributes indicate the heading style of choice to be sans-serif, underlined blue (which is misrepresentation of universal browser default for links). The prevailing external styles for headers in given <DIV> seem to be { color: #000000; font-family: Georgia, "Times New Roman", Times, serif; }and the h4, h5, h6 font-size are extremely small.

Based on above assumptions, and without considering new HTML5 or CSS3 possibilities, the following might be a simple fix.

<i>
 </i>&lt;style type="text/css"&gt;
 /*.serif was already on page*/
 .serif { font-family:"Times New Roman",Georgia,Serif; }
 /*could add these .bios style rules to page */
 .name { text-align:left; color: blue; border-bottom: navy thin solid; background-color: /*silver*/ #ebebeb; width: 100%; }
 .bios img { float: left; width: 100px; height: auto; border: none; margin: 2px; padding: 2px; }
 .bios h4, .bios h5, .bios h6 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.2em; line-height:1.2em; letter-spacing: .1em;
 padding: 0 4px; margin: 20px 20px 0 2px;;
 background-color: #ffffff; color: #0000ff;
 text-align: left; }
 .bios h5 { text-decoration: underline; }
 .bios p { text-indent: 2em; text-align: left; text-decoration: none; font: normal 1.0em/1.2em;; color:black; background: white; padding: 0 4px; margin: 0; letter-spacing: 0;}
 .bios p + p { text-indent: 2em; }
 .bios ul { margin:0; padding:0; }
 .bios ul li { font-size: 1em; line-height: 1.2em; padding: 0 4px 0 2px; margin: 0 4px 0 2px;}
 .bios dl { }
 .bios dt { }
 .bios dd { }
 .bios dd p { }
 
 .bios a { }
 .bios a:link { }
 .bios a:visited { }
 .bios a:focus { }
 .bios a:hover { }
 .bios a:active { }
 .bios a:target { }
 &lt;/style&gt;
 . . .
 &lt;div class="bodyCopy bios"&gt;&lt;!--add BIOS class--&gt;
 &lt;div id="printContent"&gt;
 &lt;h3 class="name"&gt;This page is being updated. More to come.&lt;/h3&gt;&lt;!--example alternate to underlined blue--&gt;
 
 &lt;h5&gt;&lt;a name="Firstbio Person" id="Firstbio Person"&gt;Firstbio Person&lt;/a&gt; as a named link&lt;/h5&gt;
 &lt;p&gt;I ...&lt;/p&gt;
 &lt;p&gt;And so forth ...&lt;/p&gt;
 
 &lt;h5&gt;Secondbio Person&lt;/h5&gt;
 &lt;p&gt;My name is ... &lt;/p&gt;
 &lt;p&gt;My advice to students currently studying . . . if you find you are stuck and do not know how to get a specific result, google it!&lt;/p&gt;
 &lt;p&gt;Some of the websites I find useful are:&lt;/p&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="http://www.w3schools.com"&gt;http://www.w3schools.com/&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://library.creativecow.net/"&gt;http://library.creativecow.net&lt;/a&gt;
 &lt;/ul&gt;

The <DL> Definition List <DT> Definition Term and <DD> Definition Data seem like natural markup tags for this sort of biographical entry. And a JavaScript, jQuery or even CSS3 expandable accordion content approach would condense page nicely.

See, for example, http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/ and https://mail.google.com/mail/?shva=1#inbox/13c83981761032e8

@waxdocauthorFeb 01.2013 — #Correction on link reference/ Should be

See, for example, http://css-tricks.com/utilizing-the-...finition-list/ and

http://www.thecssninja.com/css/accordian-effect-using-css

@auntniniFeb 03.2013 — #
It has become a festering problem because concerned students were summarily dismissed when they tried to call attention to flaws that would become a nightmare to correct.[/quote]

Sounds like a futile exercise. Are you just venting your frustration?

If the lines of communication are broken at the lower end, try going to the top.

Which college is it? Can you post a URL to the page in question?

@WebJoelFeb 03.2013 — #Well the !DOCTYPE is Transitional so it probably is correct if the coder intends to use presentational and deprecated elements, but it oh-so looks like how some blog software creates code for posts.

Nesting DIV and SPAN while not wrong is really no better than using TABLE layout.

This snippet of code rewritten could be 50-75% smaller is size if written using semantic markup such as the example waxdoc provided...

@waxdocauthorFeb 03.2013 — #Humph?

[/quote]Wonder what the role of Open Text Web Solutions is?
... looks like how some blog software creates code for posts.

Nesting DIV and SPAN while not wrong is really no better than using TABLE layout. [/quote]

Wondered how a breathing, thinking human could have created such tangled gook? Amazing how some people supposedly engaged in Web development don't want to bother with HTML and CSS basics. Looks as bas as using deprecated tags all over the place. There were flat-out nesting errors here and there.

Thanks for the insight track nut.

@waxdocauthorFeb 03.2013 — #Excuse me! Thank yo WebJoel.

@waxdocauthorFeb 03.2013 — #Is this the culprit? http://www.opentext.com/wsm/index.htm ?

Or this? http://www.opentext.com/2/global/services/ls-learning-services-home/ls-catalogue/ls-offering-websolutions.htm ?

Or this? http://www.opentext.com/2/global/products/products-opentext-web-site-management.htm ?

@webdoerFeb 07.2013 — #This WebDeveloper site is a community bringing together those seeking help, those offering suggestions, and those just looking on in a celebration of learning.

Not knowing something is not a sin. The shame of ignorance comes from not searching for information and/or not striving to learn.

The above is not from an individual seeking help or a small school. This is the output of a major USA university with several campuses and a large pool of resources (including Web-savvy staff, faculty, students, alumni). This particular campus prides itself in offering communications and 6 or more Website-design or Web-page-construction courses.[/quote]

Given that the pathetic markup is from a major university with resources, one has to wonder why there was such systemic failure in communications and ask: "Who assigned the task to an unqualified individual who had no concept of compliance to current Web standards?" Or more likely, "Who was the unqualified individual who assumed such a task without seeking assistance?" "Where was the oversight?"

Which university was it? Can you give a link to the page?

@waxdocauthorFeb 09.2013 — #Frustrated like a Wall Street whistle-blower must have felt in 2007.

With communication channels defunct, it was hoped some caring person at the [B]State University of New York, Fashion Institute of Technology[/B] (FIT) campus in NYC would take note of this discussion and clean up http://www.fitnyc.edu/13628.asp (online for several months now).

Don't mean to be obsessive about yucky coding. It's not world-shattering, but -- for one introduced to things Web via FIT courses — it is personal.

It is a personal insult when the significance of well-honed Web skills is not recognized by a major institution like SUNY FIT. Exhibiting illogical, incoherent, inaccessible HTML markup (ignoring basic CSS concepts) discredits SUNY FIT students who have striven to learn and improve their Web skills.

@webdoerFeb 11.2013 — #SHAME, shame on SUNY FIT.

But don't take it as a personal affront.

Also in #CSS _↴

unwanted space between browser window to container block Navigation buttons Menu element positioned okay in IE/FF, not Opera

Success!

Help @waxdoc spread the word by sharing this article on Twitter...

Tweet This

What would you do about pathethic HTML / CSS markup?

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

What would you do about pathethic HTML / CSS markup?

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴