Volvamos a lo básico para este. Todos los que lean esto al menos saben qué es HTML. Creo que, sin importar el nivel de experiencia que tenga alguien, revisar la fundación puede ayudar a aumentar el conocimiento. También ayuda a perfeccionar las habilidades, especialmente con las tecnologías en constante evolución que impulsan Internet..

También se ha hablado mucho sobre el cambio con HTML 5. Todas las etiquetas que menciono a continuación se admiten tanto en HTML 4.01 como en HTML 5. Aunque algunas de estas etiquetas ya se usan ampliamente; Me gustaría desafiar algunas de las formas en que las usamos y pensarlas.

1.

Cualquier libro que lea sobre programación le dirá que es bueno explicar lo que está haciendo. ¿Por qué los comentarios son una buena idea? Por esa razón exacta. Ayuda a aquellos que miran su código a saber qué está pasando.

Para HTML, comentar puede parecer una exageración; sin embargo, puede usarse para definir secciones y puede ayudar a mantener su código organizado y estructurado. Etiquetar el principio y el final de una sección realmente ayuda con el flujo de trabajo.

 
 
elemento de menú 1
 
elemento de menú 2
 
   
Este es el contenido principal..
... 

2. Estilos de tabla - , , y

Cuando pienso en los primeros días del desarrollo web, lo primero que me viene a la mente es

. Abusé tanto de esto. Cuando usas correctamente, para datos tabulares solamente, es posible definir estilos para encabezados de columna, filas de pie de página y el cuerpo.

Por más aburrido que sea, realmente se siente bien crear una hoja de cálculo bien formateada. (Esto está hablando fuera del desarrollo web). ¿Por qué no deberíamos llevar esa simple tarea de formatear a un gran diseño? Cada etiqueta se puede diseñar fácilmente dentro de la hoja de estilo del sitio.

Solo para aclarar: estas tres etiquetas afectan a todas las filas de la tabla.

ít	Cantidad
Suma	7
# 1	3
# 2	4

Envolver las filas de la tabla con .

Envolver las filas de la tabla con . los las filas también deben estar arriba . Esto es para que la fila de pie de página se represente antes de las filas de datos restantes.

Envolver las filas de la tabla con .

 
 
 
ít
 
Cantidad
 
 
 
 
 
Suma
 
7
 
 
 
 
 
# 1
 
3
 
 
 
# 2
 
4
 
 
 

3.

Los menús desplegables son una excelente manera de presentar los datos a un usuario para su selección. No solo son conscientes del estado real de la pantalla, sino que son familiares y fáciles de usar. Lo bueno es con , es posible crear categorías (o podríamos llamarlas encabezados) para sus opciones.

Tigres de Detroit
Cachorros de chicago

Leones de Detroit
Osos de chicago

  Tigres de Detroit Cachorros de chicago   Leones de Detroit Osos de chicago  

4. Encabezados -

,

,

,

,

, y

Sé que todos usan etiquetas de encabezado. Pero, para ser honesto, no recuerdo cuándo fue la última vez que utilicé

o más bajo sin embargo. No tengo un buen razonamiento aparte de que no lo pensé y usé algo menos semántico, como estilizar el texto en una

.

Mi punto aquí es: No crees más trabajo para ti mismo. Recuerda usar todas las etiquetas de encabezado..

5.

y

Me gustan los sitios que tienen información fácil de encontrar con elementos separados lógicamente. Creo que se ve elegante.

Los grupos juntos forman elementos dibujando un cuadro alrededor de ellos. También es posible agregar un título al formulario usando

.

 
 
Información general: 
 Nombre:  Email:  Fecha de nacimiento:  
 

6.

Esta es posiblemente una de mis etiquetas HTML favoritas. La etiqueta de la etiqueta no hace nada por el estilo. Agrega funcionalidad.

Se utiliza para definir una etiqueta a un elemento de entrada. ¿Así que cuál es el problema? Cuando se usa, la etiqueta se puede hacer clic, haciendo que el campo de entrada correspondiente esté activo. Esto funciona para cuadros de texto o botones de radio..

Nombre:
Masculino:
Hembra:

 Nombre:  Masculino:  Hembra:  

7.

Si está buscando crear un efecto dramático para llamar la atención sobre una declaración u oración, puede usar

. El espacio en blanco se inserta antes y después del elemento, de forma predeterminada. Los márgenes también se agregan para compensar el texto contenido del otro contenido.

Esta es también una gran manera de hacer cosas como una cita en bloque tradicional. (Sé que fue terriblemente obvio). La mayoría de las veces, cuando escribo un tutorial, tomo un extracto directo de otro sitio o fuente. usaré

para establecer esto aparte.

Esto es lo que Nettuts + usa para su estilo blockquote.

8.

No quiero decir eso está relacionado con

, pero sé que normalmente termino usándolos en conjunto.

Pensar en cuando necesitas proporcionar una cita para algo Si está recién salido de la universidad, piense en proporcionar la lista de sus referencias al final de sus documentos. Recuerde, en formato MLA, los títulos de libros y periódicos deben ir en cursiva.

"Nos encantan las tipografías hermosas, y apreciamos los esfuerzos de los diseñadores que desarrollan excelentes técnicas y herramientas tipográficas o que simplemente comparten sus conocimientos con otros diseñadores". - smashingmagazine.com

 
"... esta es una gran cita". - someGreatPerson 

9.

Usar listas es una gran manera de organizar la información. Todo el mundo es consciente de

, pero que tan seguido son
y

¿usado? Quizás la referencia a la "lista de definiciones" confunde a algunos programadores principiantes a pensar que solo pueden usarse al insertar términos y definiciones; sin embargo, este no es realmente el caso.

Tipos de listas

1. Lista desordenada (ul)
2. Lista ordenada (ol)
3. Lista de definiciones (dl)

Lo que hacen

• Lista desordenada (ul): Una lista con viñetas
• Lista ordenada (ol): Una lista numerada
• Lista de definiciones (dl): Una lista con definiciones de los elementos.

Razones para usar listas

• Estilo consistente
• Fácil de crear
• Muy versátil

Cada tipo de lista muestra información de una manera valiosa. No creo que necesito explicar

y
, Pero echemos un vistazo más de cerca a la estructura de una lista de definiciones.

 
Este es el elemento de la lista # 1
 
Esta es la definición de elemento de lista # 1
 
Este es el elemento de la lista # 2
 
Esta es la definición de elemento de lista # 2

En lugar de solo declarar un tipo de lista (

o
) y cada elemento de la lista (
1. ), usamos
   y
   .
   define cada elemento de la lista y
   describe el artículo anterior.

   10. '(y otros caracteres ASCII)

   Es una codificación adecuada utilizar códigos HTML ASCII cuando se utiliza cualquier símbolo. Es un poco más de trabajo, pero asegurará que los caracteres se representen correctamente y que el navegador no los confunda como parte de una cadena u otro marcado. ¿Alguna vez te has topado con algún texto en una página web que no se veía correctamente? Tal vez algo como esto: "Yo no # %%! T usé HTML para renderizar el apóstrofe".

   El ejemplo anterior es forzado, pero creo que transmite la idea..

   Los conjuntos de caracteres utilizados en las computadoras modernas, HTML e Internet están basados ​​en ASCII. - w3schools.com

   w3schools.com tiene una gran página de referencia HTML ASCII para los caracteres ASCII. Animo a todos a que lo vean y memoricen algunos de los personajes más utilizados, como el apóstrofe, las comillas, el signo y el "signo".

   Gracias por leer!

   Código