Solved

What is the equivalent in XHTML for these html tags?

Posted on 2014-04-08
12
616 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
  • 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
 
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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Browsing the questions asked to the Experts of this forum, you will be amazed to see how many times people are headaching about monster regular expressions (regex) to select that specific part of some HTML or XML file they want to extract. The examp…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

914 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now