HTML… Una de las cosas más fáciles de aprender es la programación. La mayoría de los novatos e incluso los niños comienzan a programar usando HTML . Aprenden, construyen algunas páginas web, pero muchos desarrolladores incluso experimentaron que cometieron algún error tonto al escribir el código para la interfaz. Cometer estos errores tontos no solo molesta a otros desarrolladores (cuando necesitan hacer algunos cambios), sino que también daña su sitio principal y aleja al usuario final. Vamos a mencionar algunas de las mejores prácticas comunes que debe seguir para escribir un código HTML limpio y claro.
Seguir algunas prácticas comunes facilita la depuración y ahorra mucho tiempo. También ayuda en la optimización de motores de búsqueda.
1. Use la estructura adecuada del documento con Doctype
HTML tiene la naturaleza de que aún representará su marcado correctamente incluso si olvida mencionar algunos elementos como <html> , <head> , <body> y <!DOCTYPE html> . Verá el resultado correcto en su navegador como desee, pero eso no significa que encontrará el mismo resultado en todos los navegadores. Para evitar este problema, es un buen hábito seguir una estructura de documento adecuada con el tipo de documento correcto. Doctype es lo primero que se menciona en un documento HTML. Puede elegir el tipo de documento correcto desde el enlace https://www.w3.org/wiki/Doctypes_and_markup_styles
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Welcome Programmers</h1> <p>This website is GeeksforGeeks.</p> </body> </html>
2. Cierra las Etiquetas
Para evitar problemas de validación y compatibilidad, no olvide cerrar todas las etiquetas en su código. Hoy en día, la mayoría de los editores de texto presentan funciones que cierran las etiquetas HTML automáticamente; es una buena práctica (y definitivamente para la verificación final) asegurarse de que no se pierda ninguna etiqueta principal o anidada que no esté cerrada. En HTML5, es opcional cerrar las etiquetas HTML, pero de acuerdo con la especificación W3C, debe cerrar todas las etiquetas HTML para evitar cualquier error de validación en el futuro.
3. Escribir etiquetas en minúsculas
Acostúmbrese a usar minúsculas para todas las etiquetas, atributos y valores en el código HTML. Es una práctica estándar de la industria y también hace que su código sea mucho más legible. Poner en mayúsculas las etiquetas no afectará el resultado en su navegador, pero es una buena práctica escribir elementos en minúsculas. Escribir su código en minúsculas es fácil y también se ve más limpio.
Ejemplo:
HTML
<!-- Bad code--> <SECTION> <p>This is a paragraph.</p> </SECTION> <!-- Good code--> <section> <p>This is a paragraph.</p> </section>
4. Agregar atributos de imagen
Cuando agregue una imagen en su código HTML, no olvide agregar el atributo alt por razones de validación y accesibilidad. Además, asegúrese de elegir la descripción correcta para el atributo alt. Los motores de búsqueda clasifican su página más abajo como resultado cuando no menciona los atributos alt con una imagen. También es bueno mencionar la altura y el ancho de la imagen. Reduce el parpadeo porque el navegador puede reservar espacio para la imagen antes de cargarla.
Ejemplo:
HTML
<!-- Bad Code--> <img src="html5.gif"> <!-- Good Code--> <img src="html5.gif"><img src="html5.gif" alt="HTML5" style="width:100px;height:100px">
5. Evite el uso de estilos en línea
Muchos novatos cometen el error de agregar un estilo en línea en las etiquetas HTML. Hace que su código sea complicado y difícil de mantener. Acostúmbrese a mantener sus estilos separados del marcado HTML. El uso de estilos en línea puede crear muchos problemas. Hace que su código esté desordenado, ilegible y difícil de actualizar o mantener. Separar HTML con CSS también ayuda a otros desarrolladores a realizar cambios en el código con mucha facilidad.
Ejemplo:
HTML
<!-- Bad Code --> <p style="color: #393; font-size: 24px;">Thank you!</p> <!-- Good Code --> <p class="alert-success">Thank you!</p>
6. Use un título significativo y metaetiquetas descriptivas
El título HTML realmente importa mucho cuando se trata de la optimización de motores de búsqueda o la clasificación de su página. Siempre trate de hacer que su título sea lo más significativo posible. El título de su página HTML aparece en la página de resultados del motor de búsqueda de Google y la indexación de su sitio se basa en él.
Una meta descripción le dice al usuario de qué se trata la página, así que hágala descriptiva que especifique claramente el propósito de su sitio web o página. Evite el uso de palabras y frases repetidas. Cuando un usuario escribe alguna palabra clave en la barra del motor de búsqueda, las arañas del motor de búsqueda seleccionan esa palabra clave y luego la utilizan para encontrar la página relevante para los usuarios en función de la palabra clave coincidente utilizada en las metaetiquetas.
Ejemplo:
HTML
<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta name="description" content="A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions."/> <link rel="shortcut icon" href="https://www.geeksforgeeks.org/favicon.ico" type="image/x-icon"/> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> <meta name="theme-color" content="#0f9d58" /> <meta property="og:image" content="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png"/> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="200" /> <meta property="og:image:height" content="200" /> <script src="https://apis.google.com/js/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script> <title>GeeksforGeeks | A computer science portal for geeks</title>
7. Usa los elementos del encabezado sabiamente
Las etiquetas de encabezado también juegan un papel crucial para hacer que su sitio web sea amigable con los motores de búsqueda. HTML tiene 6 tipos diferentes de etiquetas de encabezado que deben usarse con cuidado. Aprenda a usar elementos <h1> a <h6> para indicar la jerarquía de contenido de su HTML y asegúrese de usar solo un h1 por página. En las especificaciones de W3C se menciona que el contenido de su página debe describirse con una sola etiqueta para que pueda agregar su texto más importante dentro de h1, como el título del artículo o la publicación del blog.
Ejemplo:
HTML
<h1>Topmost heading</h1> <h2>Sub-heading underneath the topmost heading.</h2> <h3>Sub-heading underneath the h2 heading.</h3>
8. Utilice siempre los elementos HTML correctos
Muchos principiantes cometen un error común al usar elementos HTML incorrectos. Necesitan aprender con el tiempo qué elemento se debe usar y dónde. Le recomendamos que aprenda sobre todos los elementos HTML y los use correctamente para una estructura de contenido significativa. Por ejemplo, en lugar de usar <br> entre dos párrafos, puede usar el margen CSS y/o las propiedades de relleno. Aprenda cuándo usar <em> y cuándo usar <i> (ambos tienen el mismo aspecto), aprenda cuándo usar <b> y cuándo usar <strong> (ambos tienen el mismo aspecto). Viene con la práctica y cuando mantienes tus ojos en un buen código escrito por otros desarrolladores. Otro buen ejemplo se da a continuación.
HTML
<!-- Bad Code --> <span class="heading"><strong>Hello Geeks</span></strong> <br><br> This is Computer Science portal for geeks. <br><br> <!-- Good Code --> <h1>Hello Geeks</h1> <p>This is Computer Science portal for geeks.</p>
9. Uso adecuado de la sangría
es importante dar el espacio adecuado o la sangría en su código HTML para que sea más legible y manejable. Evite escribir todo en una sola línea. Hace que su código esté desordenado y plano. Cuando utilice el elemento anidado, proporcione la sangría adecuada para que los usuarios puedan identificar el principio y el final de la etiqueta. Un código que sigue el formato adecuado es fácil de cambiar y se ve bien para otros desarrolladores. Es una buena práctica de codificación que también reduce el tiempo de desarrollo.
HTML
<!-- Bad Code --> <aside> <h3>GeeksforGeeks</h3> <h5>A computer science portal for geeks</h5> <ul> <li>Computer Science</li> <li>Gate</li> </ul> </aside> <!-- Good Code --> <aside> <h3>GeeksforGeeks</h3> <h5>A computer science portal for geeks</h5> <ul> <li>Computer Science</li> <li>Gate</li> </ul> </aside>
10. Valida tu código
Por último, pero no menos importante, acostúmbrese a validar su código HTML con frecuencia. Validar su código es un gran trabajo y ayuda a encontrar problemas difíciles. Puede descargar la validación de marcado W3C o la barra de herramientas de desarrolladores de Firefox para validar su sitio por URL. Los validadores son muy útiles para detectar errores y resolverlos.
Publicación traducida automáticamente
Artículo escrito por anuupadhyay y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA