Devo usar tags não padrão em uma página HTML para destacar palavras?


20

Gostaria de saber se é uma boa prática ou legal usar tags não padrão em uma página HTML para determinados fins personalizados.

Por exemplo:

Lorem ipsum dolor sente-se no meio, consectetur elip adipiscing. Nullam consequentemente, sente-se em um lugar mais suscetível, em outro lugar ao mesmo tempo, em um pulvinar odio magna suscipit mi.

Quero destacar "consectetur adipiscing elit" como importante e "nisi arcu accumsan arcu" como destacado.

Então, no HTML, eu colocaria:

Lorem ipsum dolor sit amet, <important> consectetur adipiscing elit </important>. Nullam consequentemente, felis sit amet suscipit laoreet, <highlighted> nisi arcu accumsan arcu </highlighted>, vel pulvinar odio magna suscipit mi.

e no CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

No entanto, como essas tags HTML não são válidas, tudo bem?


56
<span class=..>?
Jake Berger

12
Por definição, se eles são personalizados, não são tags HTML (que são padronizadas). São apenas elementos que não têm significado específico.
Oded


14
<em>é basicamente seu <important>e <mark>é seu <highlight>.
Peter C

3
Você está certo. A especificação HTML5 diz que <strong>é mais apropriado por importância do que <em>é. Minha culpa.
Peter C

Respostas:


50

Não, isso não é uma boa prática. Você deve usar tags já semânticas e significativas - talvez <em>neste caso - e aplicar estilos CSS para atingir seus requisitos de design.


3
Presumivelmente, ele não está familiarizado com as aulas. A sintaxe é: HTML <em class="myclass">sample text</em>CSS .myclass: { background: red; etc. } Você pode dar aulas para a maioria das tags, não apenas em. Geralmente divou spanpara texto. Veja também
BlueRaja - Danny Pflughoeft

@ BlueRaja-DannyPflughoeft - as classes espalhadas pelo código também são a maneira errada de lidar com isso. Você provavelmente poderia fazer melhor usando seletores descendentes com uma classe ou duas em contêineres.
Wyatt Barnett

14

Sua pergunta foi feita se é " boa prática ou legal ".

Primeiro: é meio legal - pelo menos, é tolerado. Os navegadores sempre foram programados para lidar com tags que eles não entendem, mesmo que isso signifique que eles são ignorados. Este código HTML:

Some <b>bold</b> and some <slanted>italic</slanted>.

Aparecerá assim em todos os navegadores:

Alguns em negrito e outros em itálico.

Além disso, a maioria dos navegadores permitirá que você estilize esse elemento em CSS. Portanto, se você adicionar a seguinte definição de CSS:

slanted { font-style: italic; }

a maioria dos navegadores agora será renderizada da seguinte maneira:

Alguns em negrito e outros em itálico .

Realmente: tente você mesmo . Aliás, esse é um truque que os desenvolvedores da Web usam para tentar garantir que as novas tags HTML5 sejam exibidas corretamente em navegadores mais antigos.

No entanto, essa não é a imagem completa. A resposta completa é não, não é uma boa prática . Você deve ter notado meu uso da frase " maioria dos navegadores". Infelizmente, todas as versões do Internet Explorer anteriores ao IE9 falham ao implementar esse comportamento. No IE8 e versões anteriores, o código acima continuará assim:

Alguns em negrito e outros em itálico.

Há uma descrição excelentemente detalhada do problema em Dive Into HTML5 , onde você também encontrará detalhes de uma solução alternativa. No entanto, a solução alternativa requer JavaScript, portanto não é uma solução HTML pura e não funciona em todos os cenários.

Portanto, resposta curta: atenha-se apenas aos elementos HTML padrão e estilize-os como desejar no seu CSS.


Isso não é legal. A especificação define quais elementos são permitidos. A capacidade dos navegadores de se recuperar de erros de autor não corrige os erros de autor.
Quentin

Onde posso achar que não é legal? Tentei pesquisar nas especificações HTML, mas não consegui encontrar uma boa referência.
Dibbeke

2
@DavidDorward Sim, entendo o seu ponto. O que eu quis dizer foi que os navegadores garantem não quebrar quando vêem uma etiqueta desconhecida - em oposição à falta de garantia em torno, digamos, de uma etiqueta não fechada. Portanto, talvez o termo correto aqui seja "tolerado" e não legal. Atualizei a resposta de acordo.
10119 Mark-

@DavidDorward é absolutamente legal. O W3C foi tão longe na especificação do HTML5 que determinou que "A interface HTMLUnknownElement deve ser usada para elementos HTML que não são definidos por esta especificação". Se não fosse legal, eles teriam declarado isso. Eu acho que está se construindo sobre se UnknownElement ou Microformats são a melhor abordagem semântica para a web. Independentemente de qual é o melhor, ambos são legais.
cânhamo

1
Da especificação : Ao contrário das versões anteriores da especificação HTML, esta especificação define com alguns detalhes o processamento necessário para documentos inválidos e documentos válidos. No entanto, embora o processamento de conteúdo inválido é na maioria dos casos bem definidos, requisitos de conformidade de documentos ainda são importantes
Quentin

8

Se você precisar manter a semântica <important/>por motivos específicos, poderá usar o XSL para transformar suas tags personalizadas em HTML válido. Você pode ler mais sobre este tópico aqui:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

Você ainda não pode ter <important/>na saída HTML final, mas pode transformá-la automaticamente em algo como <span class="important"....


8

Há algumas respostas aqui explicando por que você nunca deve criar suas próprias tags personalizadas. Indiscutivelmente, eles estão todos incorretos.

A análise do WHATWG de tags personalizadas conclui que elas são aceitáveis, compatíveis com os padrões (já que o manuseio de tags não reconhecidas é bem definido) e mais acessível do que, por exemplo, denominar uma div genérica.

<x-accordion> </x-accordion> não é pior que <div class = "accordion"> </div> em todos os sentidos mecânicos. Na ausência de definição para "acorde x" (ou suporte ao modelo de componente), ambos significam a mesma coisa, ambos podem ser estilizados da mesma maneira. Um é HTMLUnknownElement, o outro é HTMLDivElement e a superfície da API é idêntica.

O que você deve fazer, que o OP não fez, é prefixar todas as tags personalizadas com 'x-' por convenção. Isso indica claramente que você deseja que essa tag seja local no seu documento e evita conflitos com elementos de especificações futuras.

Alguns argumentam que, como determinados navegadores populares não tratam tags personalizadas de maneira compatível com os padrões, você não deve usá-las. No entanto, o comportamento de navegadores não compatíveis é um problema seu e, de preferência, não o forçará a escrever uma marcação não semântica. Existem soluções Javascript e não Javascript para esse problema, que devem ser aplicadas apenas aos navegadores não compatíveis aos quais você deseja apoiar especificamente.

Tudo isso dito, se uma tag existir na especificação (<mark>) que cubra claramente o significado semântico da tag que você criou (<highlight>), é certamente preferível usar a tag existente.


Se alguém deseja marcar algum texto (por exemplo, "Dm7"), de modo que clicar nele fará com que um acordeão animado toque um sétimo acorde D menor, a abordagem "x-acordeão" seria um bom caminho a percorrer? Se o Javascript do acordeão precisar de informações adicionais, como isso deve ser melhor anotado? Como <x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>?
Supercat

5

Você pode usar <em />e <strong />com CSS personalizado para alterar como é exibido.

Forte, refere-se a maior importância.

Ênfase, refere-se ao aumento da ênfase.


4

No lado prático, não é necessário usar novas tags para destacar. Você pode usar emou itags se preferir itálico como renderização padrão (não CSS) e strongou bse preferir negrito como padrão. Se, por algum motivo, você preferir a renderização padrão como texto normal, ou seja, sem realce, use span. Em cada caso, você pode usar um classatributo para distinguir esse uso de outro uso que possa ter para a marcação.

As especificações HTML e os rascunhos (HTML5) são obscuros no que diz respeito à semântica desses elementos, mas isso não precisa causar nenhuma grande dor de cabeça.


7
-1 Este é um mau conselho. As tags eme strongdevem ser usadas quando estiver semanticamente correto, não quando você quiser negrito ou itálico. Você pode alterar a apresentação com CSS.
DisgruntledGoat

2

Não, embora seja permitido adicionar novas tags de outro espaço para nome em XHTML, o processamento de tags HTML que não são especificadas é fortemente desencorajado.


2

Bem, é legal que você não seja preso por fazer isso. Mas se assassinos do W3C aparecerem à sua porta, não se surpreenda.

Primeiro, outros desenvolvedores não vão saber o que eles significam. No caso de <important>e <highlight>eles são, mas se você usar algo como, por exemplo, <set>talvez saiba que está se referindo a um conjunto matemático, mas alguém que esteja lendo seu código poderá confundi-lo com outra coisa. Sem as especificações para dar uma resposta, poderia haver muita confusão.

Segundo, e se o W3C decidir que um <important>elemento é uma boa idéia, mas acha que isso deve significar um aviso urgente, como

<important>This site is going to be down for maintenance 2/29/2012.</important>

Então você está ferrado. Navegadores e seus colegas desenvolvedores ficarão confusos. Eles provavelmente o forçarão a analisar seu código com expressões regulares até que você fique louco. E todos sabemos como isso acaba.

Terceiro, o IE <9 não permite estilizar elementos desconhecidos sem um pequeno hack. Não é grande coisa, mas irritante.

Por fim, neste caso, <important>e <highlight>já existe! <strong>e <mark>é o que você está procurando. De acordo com a especificação HTML5

O elemento forte representa grande importância para seu conteúdo.

e

O elemento mark representa uma sequência de texto em um documento marcado ou destacado para fins de referência ...

Se você não o estiver usando para "fins de referência", a <span>com uma classe seria bom.


2

http://www.w3.org/TR/html5/elements.html

Esta é a revisão 1.5612.

Os autores não devem usar elementos, atributos ou valores de atributos que não são permitidos por esta especificação ou por outras especificações aplicáveis, pois isso torna significativamente mais difícil a extensão do idioma no futuro.


1
Este é o começo de uma ótima resposta; no entanto, para ser ótimo, seria útil acrescentar alguns dos motivos pelos quais a diretriz foi escrita. Além disso, a adição de estratégias alternativas que permitem o mesmo efeito, mas que se encaixam na diretriz, são frequentemente vistas de maneira favorável.
11266 JustinCelebr '

1

Ignorando a opinião de todos os outros aqui.

Não é uma boa prática por dois motivos muito importantes:

Primeiro, é inteiramente possível que, em algum momento, o comitê de padrões decida incluir uma tag denominada <important>que acaba prejudicando seu uso. Claro, pode demorar um pouco .. Mas é possível que você perca tempo rasgando-o depois.

Segundo, (esse é o verdadeiro motivo), o programador que herda seu código dirá constantemente "wtf" em sua abordagem não-padrão enquanto tira tudo isso, ou, igualmente possível, fica totalmente confuso com o que é você já fiz e simplesmente desisto de frustração.

Então seja legal. Você nunca sabe, pode acabar pedindo um emprego para algum dia.


0

Não, você não pode criar suas próprias tags HTML, porque seria necessário que todos os principais navegadores as implementassem, atualmente, quando os navegadores encontram uma tag não reconhecida, eles ignoram tudo nela, a menos que você queira criar seu próprio navegador criando um novo tag é inútil e, mesmo assim, eles funcionariam apenas no seu navegador.

Você pode tentar enviar um caso de uso para o w3c, mas duvido que ele chegue a algum lugar.


0

Não, não é uma boa prática por todos os motivos fornecidos por todas as outras respostas. Em vez de reiterar esses pontos, gostaria de apresentar uma opção que não vi nessas respostas!

No caso de não haver tags existentes cujo significado semântico corresponda aos seus objetivos, você pode usar uma combinação de CSS e o novo data-*atributo na especificação do HTML 5. Obviamente, isso funcionará com a maioria das tags que você escolher.

Exemplo:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Embora essa não seja uma solução perfeita, já que não há significado semântico bem definido para os data-*atributos, isso permitiria pelo menos fornecer informações adicionais àquelas que conheciam o significado do seu data-typeatributo.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.