Este artículo presta atención a las etiquetas html en el cuento de hadas perfecto anterior. Son dañinas, malas, obviamente feas y deben excluirse del html estándar para tener solo la mitad del trabajo, subvierta el navegador o use el nuevo más simple y recomendado. unos.
Aunque los tutoriales básicos anteriores han proporcionado sugerencias que cumplen con los estándares, los principiantes tienen fundamentos diferentes o ejercicios incorrectos. Aquí hay un resumen.
HTML está intentando pasar del rendimiento a la semántica, y luego separar la semántica (HTML) y el rendimiento (CSS). Esto se ha utilizado ampliamente en páginas web porque una única directiva de presentación (archivo CSS) se puede utilizar en muchas páginas. De esta manera, el sitio web es más fácil de administrar y si desea cambiar todo el sitio, solo necesita cambiar un código simple.
Algunas etiquetas dañinas son en realidad etiquetas de presentación simples (como pequeñas), que pueden reemplazarse por código con el mismo significado en CSS. Otras etiquetas no son expresivas, pero son innecesarias (como la etiqueta de fuente) o perjudiciales para la usabilidad (como el parpadeo).
Etiquetas
Las etiquetas que se enumeran a continuación podrían usar mejores opciones:
La etiqueta b significa negrita. En su lugar, puede usar fuerte o agregar font-weight:bold en CSS.
i representa elementos en cursiva, puedes usar em en su lugar o agregar estilo de fuente: cursiva en css.
Big se usa para expresar texto grande. En su lugar, puede usar h1, h2, etc. Otros se pueden controlar específicamente en cssfont-size.
Pequeño se usa para expresar texto pequeño y se puede controlar en cssfont-size.
hr representa una línea horizontal, que puede reemplazarse por borde superior o borde inferior en CSS, o también puede representarse mediante imágenes.
Todas las etiquetas mencionadas anteriormente se ajustan a los estándares HTML más recientes, pero no imparten significado semántico al contenido. Es posible que tengan más usos, pero no son significativamente dañinos y puede ser muy fácil cometer errores al leer las malas etiquetas que aparecen a continuación.
u representa un elemento subrayado. Mantiene el texto subrayado como una conexión, por lo que quizás esta etiqueta desapareció; a la gente realmente no le gusta que el texto no conectado esté subrayado.
center puede centrar el elemento. La propiedad CSS text-align no solo puede centrar el centro sino también a la izquierda, a la derecha y justificar. menu se usa para crear una lista de menú. Lo hace de manera más hermosa que ul, pero las listas desordenadas son más comunes y ul reemplaza a menu.
El elemento de capa es muy similar al elemento div, pero sólo funciona en versiones anteriores de los navegadores Netscape y es de poca utilidad.
parpadeo o marquesina. Diles un firme no.
La fuente se puede utilizar para definir el nombre, el tamaño y el color de la fuente. Los sitios web más antiguos (e incluso los actuales) que utilizan etiquetas de fuentes continuamente en toda la página son como una plaga de termitas. Algunos programas de creación web colocan etiquetas de fuente alrededor de cada elemento para controlar el color o el tamaño del texto. Utilice la etiqueta de fuente para aplicarla a cada elemento. Si se expresa en CSS, solo requiere una oración simple y se puede cambiar en todo el sitio. Con este método, no solo puede reducir el tamaño de la página web, sino también cambiar el contenido representado por la fuente cambiando una simple declaración CSS. Esto mantiene el estilo del sitio web consistente. Las etiquetas de fuentes y el mal uso de las tablas son las principales causas de las páginas web infladas.
Atributos
Ahora puede que estés usando las etiquetas correctamente, pero tienen algunas propiedades parasitarias molestas que pueden provocar un mal sabor.
name asigna un nombre a un elemento, lo que funciona perfectamente en elementos de formulario como input, pero en otros lugares, el trabajo del nombre lo asume el atributo id.
text y bgcolor se utilizan para especificar el color básico del texto y el color de fondo de la etiqueta de cuerpo abierto. Las propiedades de color y color de fondo en CSS se pueden aplicar bien al selector de cuerpo.
background puede especificar una imagen de fondo para la etiqueta del cuerpo. CSS puede proporcionar mejores atributos de imagen de fondo, como imagen de fondo.
link, alink, vlink puede especificar el color del enlace para la etiqueta del cuerpo. Propiedades CSS: :link, :active, :visited tienen el mismo efecto. align puede controlar la disposición de elementos, como <div align="center">Stuff</div>, pero al igual que la etiqueta central, puedes usar el atributo text-align en CSS.
El enlace de destino se abre en diferentes estados, como abrir una nueva ventana <a href="wherever.html" target="_blank">Ayúdame</a>. Suena bien, pero el sitio no resulta familiar. Los usuarios no esperan que esto (como abrir nuevas ventanas) parezca mágico. A la mayoría de los usuarios les gusta usar el botón "atrás", y abrir una nueva ventana significa que esta función está deshabilitada. Los atributos de rendimiento de la etiqueta, como el ancho y el alto de la imagen, el relleno de celda y el espacio entre celdas de la tabla, determinan la aplicación de diferentes atributos a diferentes elementos. No son una solución perfecta, pero si tu página tiene muchas imágenes o tablas, es posible que no tengas otras opciones viables.
La mayoría de los atributos de presentación inexplicables pertenecen a la etiqueta textarea, que no sólo tiene atributos válidos de columnas y filas, sino que el último estándar HTML los requiere.
Buena etiqueta, mala aplicación.
Para entrar a tu casa, puedes arrodillarte y arrastrarte por la madriguera de un perro, pero espera, hay una decoración en la puerta diseñada específicamente para las personas: la manija, jaja, mira, la puerta tiene el tamaño adecuado para que la gente pueda pasar.
Las etiquetas HTML están diseñadas para brindar detalles y, lo creas o no, cuando las usas correctamente, puedes lograr los mejores resultados.
Cuando HTML es semántico, las páginas web son más utilizables para usuarios con discapacidades, como los lectores de pantalla que a menudo enfatizan listas usando etiquetas ul o un encabezado usando etiquetas h1 o h2.
El abuso más grave de HTML son las tablas. Las tablas se utilizan para el diseño, pero sólo se utilizan para representar datos tabulares. La idea de no utilizar un diseño de tabla no se trata de buscar la iluminación como un budista. Tiene beneficios reales, no solo para reducir el tamaño de la página web, sino también para facilitar su mantenimiento y rediseño.
A veces, algunos diseñadores usan algunas etiquetas y atributos para completar diseños de transición (especialmente diseños de tablas). En primer lugar, pueden admitir versiones anteriores de navegadores (Netscape 4). Las tablas funcionaron mejor que CSS en Netscape 4, pero sus usuarios eran muy pequeños y estaban disminuyendo. Ahora que los usuarios móviles están aumentando, el diseño de las tablas es muy malo. Las ventajas de las tablas mencionadas anteriormente superan con creces las desventajas, y la razón es que la página debe tener en cuenta todas las funciones del navegador con el menor estilo posible.
Marcos
Ricitos de Oro piensa que es una muy buena idea ayudarla con un plato de avena, pero entonces aparecen tres grandes depredadores y la arrojan por la ventana. El marco es como un cuenco de gachas que pertenece al oso. Tienen buena pinta, pero el peligro siempre está presente.
La mayoría de los sitios web no utilizan marcos y la mayoría de los usuarios de sitios web solo utilizan una página.
Pero, ¿qué pasa si, por alguna razón, necesita evitar que los usuarios agreguen una página específica a sus favoritos, o desea evitar que páginas específicas se introduzcan por correo electrónico o mensajería instantánea, o desea agregar otro nivel de complejidad general al uso? lectura de pantalla Para usuarios discapacitados del navegador que necesitan navegar entre marcos, o si desea ingresar al infierno de los motores de búsqueda, use marcos.
Básicamente, los frameworks no hacen más que añadir complejidad y perder usabilidad.
Finalmente, si sigues las reglas siguientes, no te equivocarás demasiado.
1) Si el nombre de la etiqueta o atributo es relativamente desconocido, se recomienda comentarlo o no utilizarlo. De esta manera se mejorará la eficiencia del uso de CSS.
2) Deje que la etiqueta haga el trabajo que le corresponde. Las tablas se utilizan para datos tabulares. Simplemente use el título para el título, y así sucesivamente.
3) Cuando tengas el contenido claro, utiliza etiquetas apropiadas. Utilice listas para listas, títulos para títulos, etc.