Solved

What is the equivalent in XHTML for these html tags?

Posted on 2014-04-08
12
629 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
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 
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

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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

813 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

10 Experts available now in Live!

Get 1:1 Help Now