Para desenvolver em XHTML voc\u00ea deve seguir algumas regras:<\/p>\n
XML que deu origem ao XHTML \u00e9 sens\u00edvel ao tamanho de caixa de fonte, ent\u00e3o com XHTML n\u00e3o \u00e9 diferente. \u00c9 obrigat\u00f3rio o uso de letras min\u00fasculas ao escrever a sintaxe de elementos XHTML.
\nExemplo:
\n<\/p>\n
<H1>T\u00edtulo principal<\/H1>\r\n<P> Par\u00e1grafo de exemplo<\/P>\r\n<td COLSPAN=\u201d3\u201d>\r\n<\/pre>\n
<h1>T\u00edtulo principal<\/h1>\r\n<p> Par\u00e1grafo de exemplo<\/p>\r\n<td colspan=\u201d3\u201d>\r\n<\/pre>\nAninhar as tags:<\/h3>\n
A primeira tag a ser aberta dever ser a \u00faltima a ser fechada, a segunda tag \u00e9 a pen\u00faltima e assim por diante.
\nExemplo:<\/strong><\/p>\n\n
- Errado:<\/li>\n<\/ul>\n
<div><p><em>Texto em destaque<\/div><\/p><\/em><\/pre>\n\n
- Certo:<\/li>\n<\/ul>\n
<div><p><em>Texto em destaque<\/em><\/p><\/div><\/pre>\nFechar todas as tags abertas:<\/h3>\n
Toda tag que for aberta deve ser fechada, diferentemente do que ocorre com HTML. Em HTML podemos omitir a tag de fechamento, por exemplo, nas tags. <\/p>\n
<p> e <li><\/pre>\nExemplo:<\/strong><\/p>\n
\n
- Errado:<\/li>\n<\/ul>\n
<p>Par\u00e1garfo sem tag de fechamento.\r\n<li>Um item da lista sem tag de fechamento\r\n<\/pre>\n\n
- Certo:<\/li>\n<\/ul>\n
\r\n<p>Par\u00e1garfo com tag de fechamento.<\/p>\r\n<li>Um item da lista com tag de fechamento<\/li>\r\n<\/pre>\nFechar elementos vazios:<\/h3>\n
Elementos vazios dever ter uma tag de fechamento ou a tag de abertura dever terminar com \/>
\nExemplo:<\/strong><\/p>\n\n
- Errado:<\/li>\n<\/ul>\n
\r\n<hr>\r\n<br>\r\n<img src=\u201dfoto.jpg\u201d alt=\u201dminha foto\u201d>\r\n<\/pre>\n\n
- Certo:<\/li>\n<\/ul>\n
\r\n<hr><\/hr>\r\n<br><\/br>\r\n<img src=\u201dfoto.jpg\u201d alt=\u201dminha foto\u201d><\/img>\r\n<\/pre>\nComo vimos acima podemos usar a tag de fechamento ou usar a termina\u00e7\u00e3o com barra como mostrado abaixo.<\/p>\n
\r\n<hr \/>\r\n<br \/>\r\n<img src=\u201dfoto.jpg\u201d alt=\u201dminha foto\u201d \/>\r\n<\/pre>\nProcure adotar a op\u00e7\u00e3o de termina\u00e7\u00e3o com barra, assim ter\u00e1 um c\u00f3digo menor e mais limpo.<\/p>\n
Colocar valores dos atributos entre \u201c \u201c:<\/h3>\n
Todos os valores de atributos devem ficar entre aspas, independente de ser texto ou n\u00famero.
\nExemplo:<\/strong><\/p>\n\n
- Errado:<\/li>\n<\/ul>\n
\r\n <td colspan=3>\r\n<\/pre>\n\n
- Certo:<\/li>\n<\/ul>\n
\r\n<td colspan=\u201d3\u201d>\r\n<\/pre>\nEscrever a sintaxe para atributos:<\/h3>\n
A sintaxe para atributos dever ser escrita com nome e valor.
\nExemplo:<\/strong><\/p>\n\n
- Errado:<\/li>\n<\/ul>\n
\r\n<input checked \/>\r\n<\/pre>\n\n
- Certo:<\/li>\n<\/ul>\n
\r\n<input checked=\u201dchecked\u201d \/>\r\n<\/pre>\nUsar id ao inv\u00e9s de name:<\/h3>\n
O atributo name est\u00e1 em desuso e possivelmente ser\u00e1 exclu\u00eddo das pr\u00f3ximas vers\u00f5es do XHTML.
\nExemplo:<\/strong><\/p>\n\n
- Errado:<\/li>\n<\/ul>\n
\r\n<img src=\u201dfoto.jpg\u201d alt=\u201dminha imagem\u201d name=\u201dfoto\u201d \/>\r\n<\/pre>\n\n
- Certo:<\/li>\n<\/ul>\n
\r\n<img src=\u201dfoto.jpg\u201d alt=\u201dminha imagem\u201d id=\u201dfoto\u201d \/>\r\n<\/pre>\nIsso vale tamb\u00e9m para links internos, \u00e2ncoras. Em XHTML use o atributo id no lugar de name.
\nUse:<\/p>\n\r\n<a id=\u201dtopo\u201d>Topo<\/>\r\n<\/pre>\nAo inv\u00e9s de:<\/p>\n
\r\n<a name=\u201dtopo\u201d>Topo<\/>\r\n<\/pre>\nOBS: Em documentos nos quais voc\u00ea precise de compatibilidade entre navegadores antigos, use ambos atributos, como mostrador abaixo.<\/p>\n
\r\n<a id=\u201dtopo\u201d name=\u201dtopo\u201d>Topo<\/>\r\n<img src=\u201dfoto.jpg\u201d alt=\u201dminha imagem\u201d id=\u201dfoto\u201d name=\u201dfoto\u201d \/>\r\n<\/pre>\nAtributo alt para imagens:<\/h3>\n
O uso do atributo alt \u00e9 obrigat\u00f3rio. No caso de uma imagem que esteja fazendo um papel decorativo, use o atributo alt vazio, apenas d\u00ea um espa\u00e7o entre as aspas.
\nExemplo:<\/strong><\/p>\n\r\n<img src=\u201dfoto.jpg\u201d alt=\u201dminha imagem\u201d \/>\r\n<img src=\u201dbarra_lateral.jpg\u201d alt=\u201d \u201d \/>\r\n<\/pre>\nBloco de coment\u00e1rios:<\/h3>\n
\u00c9 comum o uso de coment\u00e1rios para marcar trechos de c\u00f3digo. E tamb\u00e9m \u00e9 comum o uso de uma seq\u00fc\u00eancia de caracteres, dentro da tag de coment\u00e1rio, para destacar mais o coment\u00e1rio.
\nEvite o uso do cl\u00e1ssico tracejado (-). Alguns navegadores mais antigos podem encontrar dificuldade na interpreta\u00e7\u00e3o da seq\u00fc\u00eancia desse caractere. Use sinais de iguais (=) ou a letra xis (x).
\nExemplo:<\/strong><\/p>\n\n
- Errado:<\/li>\n<\/ul>\n
\r\n<!--- ----------------------------------- menu lateral ----------------------------------- -->\r\n<\/pre>\n\n
- Certo:<\/li>\n<\/ul>\n
\r\n<!-- ==================== menu lateral ====================== -->\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Para desenvolver em XHTML voc\u00ea deve seguir algumas regras: Escrever todas as tags e atributos em letras min\u00fasculas: XML que deu origem ao XHTML \u00e9 sens\u00edvel ao tamanho de caixa de fonte, ent\u00e3o com XHTML n\u00e3o \u00e9 diferente. \u00c9 obrigat\u00f3rio o uso de letras min\u00fasculas ao escrever a sintaxe de elementos XHTML. Exemplo:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[48],"class_list":["post-58","post","type-post","status-publish","format-standard","hentry","category-html","tag-xhtml"],"yoast_head":"\n
Diferen\u00e7a entre XHTML e HTML<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/html\/58\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diferen\u00e7a entre XHTML e HTML\" \/>\n<meta property=\"og:description\" content=\"Para desenvolver em XHTML voc\u00ea deve seguir algumas regras: Escrever todas as tags e atributos em letras min\u00fasculas: XML que deu origem ao XHTML \u00e9 sens\u00edvel ao tamanho de caixa de fonte, ent\u00e3o com XHTML n\u00e3o \u00e9 diferente. \u00c9 obrigat\u00f3rio o uso de letras min\u00fasculas ao escrever a sintaxe de elementos XHTML. Exemplo:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/html\/58\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2008-12-24T20:25:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-11-26T12:25:40+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/58\",\"url\":\"https:\/\/www.kadunew.com\/blog\/html\/58\",\"name\":\"Diferen\u00e7a entre XHTML e HTML\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2008-12-24T20:25:21+00:00\",\"dateModified\":\"2013-11-26T12:25:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/58#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/html\/58\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/58#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/html\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diferen\u00e7a entre XHTML e HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Diferen\u00e7a entre XHTML e HTML","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/html\/58","og_locale":"pt_BR","og_type":"article","og_title":"Diferen\u00e7a entre XHTML e HTML","og_description":"Para desenvolver em XHTML voc\u00ea deve seguir algumas regras: Escrever todas as tags e atributos em letras min\u00fasculas: XML que deu origem ao XHTML \u00e9 sens\u00edvel ao tamanho de caixa de fonte, ent\u00e3o com XHTML n\u00e3o \u00e9 diferente. \u00c9 obrigat\u00f3rio o uso de letras min\u00fasculas ao escrever a sintaxe de elementos XHTML. Exemplo:","og_url":"https:\/\/www.kadunew.com\/blog\/html\/58","og_site_name":"KADUNEW","article_published_time":"2008-12-24T20:25:21+00:00","article_modified_time":"2013-11-26T12:25:40+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/html\/58","url":"https:\/\/www.kadunew.com\/blog\/html\/58","name":"Diferen\u00e7a entre XHTML e HTML","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2008-12-24T20:25:21+00:00","dateModified":"2013-11-26T12:25:40+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/58#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/html\/58"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/html\/58#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/www.kadunew.com\/blog\/category\/html"},{"@type":"ListItem","position":3,"name":"Diferen\u00e7a entre XHTML e HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/58"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":16,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":2736,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/58\/revisions\/2736"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}