HTML - XHTML

XHTML is HTML written in XML format.

What is XHTML?

XHTML refers to Extensible Hypertext Markup Language

XHTML is almost the same as HTML 4.01

XHTML is more strict A purer version of HTML

XHTML is HTML defined in the form of XML applications

XHTML is a W3C recommendation standard released in January 2001

XHTML is available in all major browsers Support

Why use XHTML?

Many pages on the Internet contain "bad" HTML.

If viewed in a browser, the following HTML code runs perfectly fine (even though it does not follow HTML rules):

This is an irregular HTML

Irregular HTML
This is a paragraph

XML is a markup language that must be correctly marked up and well-formed.

If you want to learn XML, read our XML tutorial.

There are a number of different browser technologies in today’s tech world. Some of them run on computers, while others may run on mobile phones or other small devices. Small devices often lack the resources and capabilities to interpret "bad" markup languages.

So - XHTML was developed by combining the best of XML and HTML. XHTML is HTML redesigned as XML.

The most important difference compared to HTML:

Document structure

XHTML DOCTYPE is mandatory

XML namespace attribute in are mandatory

, , and <body> are also mandatory</p> <p>Element syntax</p> <p>XHTML elements are required Correct nesting</p> <p>XHTML elements must always be closed</p> <p>XHTML elements must be lowercase</p> <p>XHTML documents must have a root element</p> <p>Attribute syntax</p> <p>XHTML attributes must be in lower case</p> <p>XHTML attribute values must be surrounded by quotes</p> <p>XHTML attribute minimization is also prohibited</p> <p><!DOCTYPE ....> is mandatory Sexual</p> <p>XHTML documents must carry an XHTML document type declaration (XHTML DOCTYPE declaration).</p> <p>You can find the complete XHTML document type in the Tag Reference Manual of the Rookie Tutorial. The</p> <p><html>, <head>, <title>, and <body> elements must also be present, and the xml namespace must be specified for the document using the xmlns attribute in <html>.</p> <p><strong>XHTML elements must be nested reasonably</strong></p> <p>In HTML, some elements do not need to be nested within each other, like this:</p> <p><b><i>Bold and italic text</b></i></p> <p>In XHTML, all elements must be properly nested within each other, like this:</p> <p><b><i>Bold and italic text</i></b></p> <p><strong>XHTML elements must have a closing tag</strong></p> <p>Incorrect example:</p> <p><p>This is a paragraph<p>This is another paragraph</p> <p>Correct example:</p> <p><p>This is A paragraph</p><p>This is another paragraph</p></p> <p><strong>Empty elements must contain closing tags</strong></p> <p>Error example:</p> <p>Branch:<br>Horizontal line: <hr>Image: <img src="happy.gif" alt="Happy face"></p> <p>Correct example:</p> <p>Branch:<br />Horizontal line: <hr />Image: <img src="happy.gif" alt="Happy face" /></p> <p><strong>XHTML element required is lowercase</strong></p> <p>Incorrect example:</p> <p><BODY><P>This is a paragraph</P></BODY></p> <p>Correct example ：</p> <p><body><p>This is a paragraph</p></body></p> <p><strong>Attribute names must be lowercase</strong></p> <p>Incorrect example:</p> <p><table WIDTH="100%"></p> <p>Correct example:</p> <p><table width="100%"></p> <p><strong>Attribute values must have quotation marks</strong></p> <p>Incorrect example:</p> <p><table width=100%></p> <p>Correct example:</p> <p><table width="100%"></p> <p>Attribute abbreviation not allowed</p> <p>Error example:</p> <p><input checked><input readonly> <input disabled><option selected></p> <p>Correct example:</p> <p><input checked="checked"><input readonly="readonly"><input disabled= "disabled"><option selected="selected"></p> <p><br></p> <p><strong>How to convert HTML to XHTML</strong></p> <p>Add a XHTML <!DOCTYPE> Go to your web page</p> <p>Add the xmlns attribute to the html element of each page.</p> <p>Change all elements to lowercase</p> <p>Close all empty elements</p> <p>Change all attribute names to lowercase</p> <p>Add quotation marks to all attribute values</p> <p><br></p> </div> </div> <a class="course-btn course_code_header_next" href="//m.sbmmt.com">Continuing Learning</a> </div> <div class="layui-col-md6 editor-box"> <div id="code_spread_shrink"> <div id="code_spread_shrink_show" unselectable="on"> <span>||</span> </div> </div> <div class="editor-tab js-editor-tab"> <div class="editor-left icon-left editor-op"></div> <div class="editor-view"> <ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;"> <li class="ui-tabs-active"><a href="javascript:;">new file</a></li> </ul> </div> <div class="editor-right icon-right editor-op"></div> </div> <div id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;height:600px"> <html> <meta charset="utf-8"> <body> hello xhtml </body> </html> </div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit" id="J_Commit" title="submit">submit</a> <a href="javascript:;" class="code-btn-reset " id="J_EditorReset" title="Reset Code">Reset Code</a> <div class="aotorun" style="display: block;"> <input type="checkbox" id="aotoruncheck" title="If selected, modifying the code will automatically take effect. If unchecked, submission is required to take effect"> <label for="aotoruncheck" title="If selected, modifying the code will automatically take effect. If unchecked, submission is required to take effect">Automatic operation</label> </div> </div> </div> </div> <div class="layui-col-md3" id="viewPort-content"></div>  </div> </div> <div class="phpSyyBox"> <div class="phpSyyLeft"> <div class="phpSyySyj"> <span class="right"><a href="//m.sbmmt.com/code/538.html" title="Previous section"><b class="icon3"></b>Previous section</a></span> <em></em> <span class="right"><a href="//m.sbmmt.com/code/721.html" title="Next Section"><b class="icon2"></b>Next Section</a></span> </div> <div class="phpSyyQhlx"> <a href="//m.sbmmt.com/course.html" target="_blank" title="Tutorial List"><b></b>Tutorial List</a> </div> <div class="phpSyyHqbz"> <a href="//m.sbmmt.com/wenda.html" target="_blank" title="get help"><b></b>get help</a> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="layui-main"> <div class="layui-row"> <div class="layui-col-md9"> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">Course Recommendations</li> <li id="code_down_li">Courseware download</li> </ul> <div class="layui-tab-content">  <div class="layui-tab-item layui-show"> <ul class="diy-vodeo diy-li-left php-video-ul"> <li><a href="//m.sbmmt.com/course/1496.html" title=""><img alt="Front-end Vue3 actual combat [handwritten vue project]" src="https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Front-end Vue3 actual combat [handwritten vue project]</h3> </div> <div class="php-course-bottom"> <span class="l">2857 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1495.html" title=""><img alt="APIPOST tutorial [Popularization of technical concepts related to network communication]" src="https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>APIPOST tutorial [Popularization of technical concepts related to network communication]</h3> </div> <div class="php-course-bottom"> <span class="l">1795 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1494.html" title=""><img alt="Issue 22_Comprehensive actual combat" src="https://img.php.cn/upload/course/000/000/068/6396fa7cacf3b832.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Issue 22_Comprehensive actual combat</h3> </div> <div class="php-course-bottom"> <span class="l">5521 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1493.html" title=""><img alt="Issue 22_PHP Programming" src="https://img.php.cn/upload/course/000/000/068/6396fa6f383ca123.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Issue 22_PHP Programming</h3> </div> <div class="php-course-bottom"> <span class="l">5172 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1492.html" title=""><img alt="Issue 22_Front-end development" src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Issue 22_Front-end development</h3> </div> <div class="php-course-bottom"> <span class="l">8713 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1491.html" title=""><img alt="Big data (MySQL) video tutorial full version" src="https://img.php.cn/upload/course/000/000/068/639188999c8fd700.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Big data (MySQL) video tutorial full version</h3> </div> <div class="php-course-bottom"> <span class="l">4525 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1490.html" title=""><img alt="Go language tutorial-full of practical information and no nonsense" src="https://img.php.cn/upload/course/000/000/068/638eb9972ff0a840.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Go language tutorial-full of practical information and no nonsense</h3> </div> <div class="php-course-bottom"> <span class="l">2794 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1489.html" title=""><img alt="GO Language Core Programming Course" src="https://img.php.cn/upload/course/000/000/068/63884a6b0880e953.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>GO Language Core Programming Course</h3> </div> <div class="php-course-bottom"> <span class="l">2814 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1488.html" title=""><img alt="JS advanced and BootStrap learning" src="https://img.php.cn/upload/course/000/000/068/638702e2c8dda719.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>JS advanced and BootStrap learning</h3> </div> <div class="php-course-bottom"> <span class="l">2563 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1487.html" title=""><img alt="SQL optimization and troubleshooting (MySQL version)" src="https://img.php.cn/upload/course/000/000/068/63846a02a06a2889.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>SQL optimization and troubleshooting (MySQL version)</h3> </div> <div class="php-course-bottom"> <span class="l">3374 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1486.html" title=""><img alt="Redis+MySQL database interview tutorial" src="https://img.php.cn/upload/course/000/000/068/637c751460263927.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Redis+MySQL database interview tutorial</h3> </div> <div class="php-course-bottom"> <span class="l">2963 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1485.html" title=""><img alt="Deliver food or learn programming?" src="https://img.php.cn/upload/course/000/000/067/64be34e8b4aa0653.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Deliver food or learn programming?</h3> </div> <div class="php-course-bottom"> <span class="l">5708 people are watching</span> </div></a></li> </ul> </div> <div class="layui-tab-item"> <div id="code_down" style="margin: 0 30px 26px;"> <div class="no_data" style="text-align: center;min-height: 490px;line-height:112px;padding: 190px 0;box-sizing: border-box;color: #e3e3e3;font-size: 20px;"> <div style="background: url(/static/images/lesson_video_lists.png) no-repeat;margin-right: 20px;width: 118px;height: 112px;background-position: 0 -389px;float:left;"></div>The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~ </div> </div> </div> </div> </div> </div> <div class="layui-col-md3 video-right-course"> <div class="layui-col-md12 title"> <p>Students who have watched this course are also learning</p> </div> <div class="layui-col-md12 php-video-img"> <a class="recommend" href="//m.sbmmt.com/course/812.html" target="_blank"><img width="300" height="160" src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"><span class="font14">491171 plays</span></a> </div> <div class="layui-col-md12 php-video-list"> <ul> <li><a class="font14 color66" title="Let's briefly talk about starting a business in PHP" href="//m.sbmmt.com/course/1503.html" target="_blank">Let's briefly talk about starting a business in PHP</a></li> <li><a class="font14 color66" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html" target="_blank">Quick introduction to web front-end development</a></li> <li><a class="font14 color66" title="Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things" href="//m.sbmmt.com/course/836.html" target="_blank">Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things</a></li> <li><a class="font14 color66" title="Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]" href="//m.sbmmt.com/course/902.html" target="_blank">Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]</a></li> <li><a class="font14 color66" title="Login verification and classic message board" href="//m.sbmmt.com/course/866.html" target="_blank">Login verification and classic message board</a></li> <li><a class="font14 color66" title="Computer network knowledge collection" href="//m.sbmmt.com/course/1463.html" target="_blank">Computer network knowledge collection</a></li> <li><a class="font14 color66" title="Quick Start Node.JS Full Version" href="//m.sbmmt.com/course/1462.html" target="_blank">Quick Start Node.JS Full Version</a></li> <li><a class="font14 color66" title="The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]" href="//m.sbmmt.com/course/1455.html" target="_blank">The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]</a></li> <li><a class="font14 color66" title="Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)" href="//m.sbmmt.com/course/1467.html" target="_blank">Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)</a></li> </ul> </div> </div> </div> </div> <div class="phpcn-modal-layer fixed" style="z-index:9004;visibility:visible;opacity:1;display:none;"> <div class="phpcn-modal-title"> <div class="phpcn-modal-draggable dragging"> <span>notes</span> <a href="javascript:void(0)" class="phpcn-icon-close phpcn-modal-close js-modal-close">X</a> </div> </div> <div class="phpcn-modal-inner"> <div class="phpcn-modal-dialog"></div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a> <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a> <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> php.cn：Public welfare online PHP training，Help PHP learners grow quickly！ </dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> </body> </html>