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

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?

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.

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.

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"....

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.

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.

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.

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.

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.

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.

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.

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.

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.