Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

What is the equivalent in XHTML for these html tags?

Posted on 2014-04-08
12
Medium Priority
?
729 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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 400 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 54

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
NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

 
LVL 54

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 54

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 84

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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1600 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1600 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

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

824 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