Solved

What is the equivalent in XHTML for these html tags?

Posted on 2014-04-08
12
659 Views
Last Modified: 2014-04-09
i have a html file that have to be in XHTML.  Several tags are showing up with XHTML message that they're not supported.  What can I do to fix this?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>

<header class="header">
<nav class="main-nav" role="navigation">
<footer class="footer">
<a data-style="assets/css/styles.css" data-logo="assets/images/logo.png" href="#">

tags like, header, footer, nave, a attributes of data-style and data-log
All these are not supported in XHTML so what can I do to fix this?  Thank you.
0
Comment
Question by:lapucca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 2
12 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 39987391
Change to HTML5 where they are supported.  "data-style and data-log" are going to be recognized by something in javascript and will never validate as any kind of HTML.  You may find that "you can't get there from here" because that page code was written for HTML5 and some specific javascript.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39987737
Is there a reason you have to use xhtml?  Why would you have code like that with xhtml? or did you find some workable code on another site and you want to make it work for you?  Can you give example of what you need because Dave is right, you can't have that type of code with xhmtl.
0
 

Author Comment

by:lapucca
ID: 39989106
Yes, sorry for not giving enough background information.  We purchased a site template with html and design files downloaded.  I'm using that to create a Master page in SharePoint 2013.  When the html is converted to to work in SP as a master file it requires html to be conform to XML standard.  I'm attaching 2 header section code. One from the original header of my html and the 2nd one is the header after sp converted and added its code.  

I realized these are HTML5 tags and wondering if I should/could just replace them with the <div> tag and they would still work?  
there are some conditioning code in the original html and I don't don't know if that would help.  I will look into that too.  

We still have to support IE 8 here so it's important the code works in IE8.

Thank you.
Original-header.html
converted-header.html
0
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39989141
I added sharepoint to the question topic.

I am not familiar with what sharepoint needs.  I found this http://msdn.microsoft.com/en-us/library/dd583127(v=office.11).aspx
WEBTEMPTRAINING.XML
<?xml version="1.0" encoding="utf-8" ?>
<Templates xmlns:ows="Microsoft SharePoint">
   <Template Name="TRAINING" ID="10101">
      <Configuration ID="0" Title="Training Team Site" Type="0"
         Hidden="FALSE" 
         ImageUrl="images/stsprev.jpg" 
         Description="This template provides a forum 
         for the team to create, organize, and share information
         quickly and easily. It includes a document library, and
         basic lists such as Announcements, Events, Contacts, 
         and Quick Links.">   
      </Configuration>
      <Configuration ID="1" Title="Trainee Workspace" Type="0"
         Hidden="FALSE"
         ImageUrl="images/dwsprev.jpg" 
         Description="This definition creates a site for Trainees
         to work together on specific documents.">   
      </Configuration>
   </Template>
</Templates>

Open in new window

This looks like it is a little more than just copy/paste change a few things.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39989151
If you can get away with pure xhtml, the conversion can be easier.  Any tag that does not have a matching closing tag like <br> or <hr> needs to be closed like <br/> or <hr/>  

Take a quick look at this primer http://www.w3schools.com/html/html_xhtml.asp
0
 

Author Comment

by:lapucca
ID: 39989179
Please ignore the part about using this for SharePoint13.  This question I just want to find out if I can just use <div> tag for all these html 5 tag and the code still works?
Thank you.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39989204
There is no way to tell if it will work until you try it.  That is because the javascript or jquery that came with it may be looking for those tags in it's functions.
0
 

Author Comment

by:lapucca
ID: 39989221
This is in the original head section.  does this mean the html5 code will run in IE8 with the conditional comment script?

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

Thank you.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 400 total points
ID: 39989263
If the page is html5 that gives support.  But not the same as xhtml.
0
 

Author Comment

by:lapucca
ID: 39989357
Ah!  Got it.Thanks.  

can I just use <div> tag for all these html 5 tag and the code will work in XHTML?  Uh, back to the point if javascript or jquery is looking for these html tags.  But in theory these header, footer are the same as the div tag function?  I can replace them and then fix the javascrip and jquery code that looks for them, right?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 total points
ID: 39989403
If you have html5 elements like <nav> <article><aside> just convert to a class like <div class="nav">  This may  mean updating your css.

Check the primer from w3schools and validate using http://validator.w3.org/
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> --><!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <title>I AM YOUR DOCUMENT TITLE REPLACE ME</title>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
 </head>
 <body>


<div class="nav">stuff</div>
<div class="article">stuff</div>
<div class="aside">stuff</div>

 </body>
</html>

Open in new window

0
 

Author Closing Comment

by:lapucca
ID: 39989505
Thank you.
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question