texto - tipos de etiquetas html

Etiquetas personalizadas... ¿por qué no?

Question

Encontré un sitio con una guía para agregar etiquetas personalizadas a html, de la misma manera en que la gente crea, es decir, trabaja con las nuevas etiquetas HTML5. Debo admitir que creo que sería genial agregar mis propias etiquetas, que facilitaría "escanear" el código y encontrar lo que está buscando. Pero cada sitio que encontré al respecto, la gente dice que no es bueno ... pero ¿por qué no es bueno?

Ejemplo html con clase:

<ul class="commentlist">
    <li class="comment odd">
    <div class="1">
        <div class="avatar">
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </div>
        <div class="metadata">
            <div class="name">Name</div>
            <p>response1</p>
        </div>
    </div>
    <ul class="children">
        <li class="comment even">
            <div class="2">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1a</p>
                </div>
            </div>
        </li>
        <li class="comment odd">
            <div class="3">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1b</p>
                </div>
            </div>
        </li>
    </ul>
</li>

Y aquí, lo que podría hacer con las etiquetas personalizadas, creo que sería mucho más fácil encontrar mi camino, así que ¿por qué no?

<clist>
<ccommentbox class="odd">
    <ccomment class="1">
        <cavatar>
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </cavatar>
        <cdata>
            <cname>Name</cname>
            <ctext>response1</ctext>
        </cdata>
    </ccomment>
    <cchildren>
        <ccommentbox class="even">
            <ccomment class="2">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1a</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
        <ccommentbox class="odd">
            <ccomment class="3">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1b</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
    </cchildren>
</ccommentbox>

Answer 1

Las etiquetas personalizadas no son malas

solo considera esto:

• No se reconocen en IE 6-8 por defecto -> tienes que usar JavaScript para introducir cada etiqueta personalizada que usas en la página, por ejemplo: document.createElement(''custom-tag'') Esto significa que tu sitio web solo se procesará correctamente con JavaScript encendido
• En la mayoría de los navegadores, sus etiquetas personalizadas se tratarán como elementos en línea como <span> , esto significa que debe escribir CSS para declararlas como custom-tag { display: block }
• No se encontró ningún recurso que pudiera probar que las etiquetas personalizadas tengan un impacto negativo en los motores de búsqueda. De hecho, Google lanzó Angular.js que promueve etiquetas personalizadas ( <pane> y <tab> ) en sus ejemplos en la Angular.js .
• La mayoría de los editores de HTML marcarán sus etiquetas personalizadas como HTML no válido, porque no están en la especificación oficial.

Para resumir:

• Use etiquetas personalizadas cuando hay elementos importantes que tienen más significado que <div> y no hay un equivalente HTML 4/5 existente . Esto es especialmente cierto para las aplicaciones web que analizan el DOM de etiquetas / atributos / clases especiales para crear componentes (como Angular.js).
• Si todo lo que creas es un sitio web simple con contenido normal, apégate a HTML estándar. Usted querrá que su sitio web funcione también sin JavaScript activado.
• Si crea una aplicación web donde las etiquetas personalizadas realmente podrían ayudar a hacer que la fuente sea más limpia y expresar una semántica especial, úselas. Todas las implicaciones negativas mencionadas anteriormente (JavaScript debe estar activado / declaración CSS) no serán importantes para estos casos. Las mismas reglas se aplican a los atributos personalizados.

Para obtener más detalles sobre este tema: compatibilidad con IE para Angular.js

Answer 2

Bueno, por una parte, tendría que definir CSS para que todos esos elementos personalizados se comporten como usted quiere (por ejemplo, hacer que <ccommentbox> aparezca como una lista), lo que provoca un CSS innecesario. También hace que sea más difícil para los robots de búsqueda entender su sitio.

Answer 3

Creo que querrías usar XSLT para transformar tu XML a HTML válido. Si introduce su propia etiqueta personalizada, ya no está escribiendo HTML, pero probablemente XML o SGML.

Answer 4

Hay varias razones por las que no deberías hacer esto.

1. Primero: al crear sus propias etiquetas como esa, pierde la funcionalidad de etiquetas como ul and li . Sus etiquetas personalizadas solo serán divs genéricos, y eso no le dará los resultados que está buscando. Sí, puede diseñar las etiquetas para duplicar esas funciones, pero ¿por qué dedicar todo ese tiempo a hacer algo que el navegador ya hace?

2. Segundo: las personas con discapacidades no podrán utilizar su sitio, ya que no se ajustará a ningún HTML estándar. Aquellos que son ciegos usarán tecnologías de asistencia que leen el html y presentan los contenidos verbalmente.

Otra razón es que los navegadores y javascript no siempre funcionan muy bien con estas etiquetas personalizadas. Es probable que encuentre más problemas de los que imagina. Será más difícil que tus aplicaciones sean multiplataforma si haces esto.

Answer 5

Los elementos definidos en HTML tienen semántica conocida. Estos pueden ser comprendidos por los navegadores (especialmente útiles si no tienen soporte de CSS), lectores de pantalla, motores de búsqueda y cualquier otro agente de usuario y luego se expresan al usuario.

Tus propios elementos no tienen sentido.