Skip to content

Tips.md

Latest commit

 

History

History
67 lines (36 loc) · 2.65 KB

Tips.md

File metadata and controls

67 lines (36 loc) · 2.65 KB

TIPS

Consistent Indentation:

  • Follow consistent indentation practices to improve code readability.

  • Use indentation spaces for each level of elements within your HTML structure, making it easier to understand the document’s hierarchy.

Attention to Titles:

  • Pay attention to your HTML page’s title using the <title> tag.

  • Be clear and descriptive when choosing a title, as it will appear on the browser tab and is important for user experience.

Good Documentation Practices:

  • Document your code as you go, explaining the purpose of each section and the use of tags.

Semantic Tag Usage:

  • Use heading tags (<h1>, <h2>, etc.) semantically to indicate the hierarchy of your titles. Only use one <h1> per page and arrange the other headers hierarchically.

  • Assign meaningful names to tags and attributes to make their purpose clearer. For example, use <div id="links"> instead of <div id="section1">.

Alt Attribute for Accessibility:

  • Include the alt attribute in all image tags (<img>).
  • Provide concise and meaningful descriptions to help visually impaired users or in case images fail to load.

<span> Tag for Highlighting Text:

  • Use the <span> tag to highlight or differentiate specific parts of text.
  • Even if no specific styles are applied in this example, <span> can be styled later with CSS to format that content.

Using Emmet:

  • Take advantage of Emmet to quickly generate the basic HTML structure. This speeds up the coding process and enhances efficiency.

<caption> Tag:

  • Use the <caption> tag to provide a descriptive title for your table. This improves accessibility and helps users better understand the content of the table.

Accessibility:

  • Ensure your table is accessible by providing appropriate descriptions, using scope attributes, and correctly marking table headers.

Using Semantic Tags:

  • Use semantic tags like <form>, <label>, <input>, <select>, and <textarea> to meaningfully structure your form. This improves both accessibility and SEO.

Validation Attributes:

  • Utilize attributes like required for fields that must be completed. This aids in client-side validation before sending data to the server. Using the <label> Tag:

  • Always use the <label> tag associated with each field to enhance accessibility and user experience.

  • Associate each <label> with its corresponding <input> using the for attribute.

Using the <fieldset> Tag:

  • To group related sets of fields, use the <fieldset> tag. This helps organize and visually structure the form.