HTML is an art of coding, it is the backbone of any website. Whether you are a beginner or an experienced developer, it is always possible to miss small details. In this blog, we will go through 10 important points that every developer should keep in mind while writing HTML.
These tips will help you write clean and optimized HTML code, and will work seamlessly with React, Angular, and Vue.
1. File Naming Conventions
The names of your HTML files should be in lowercase, with no spaces or special characters. The name should reflect the function of the file and should be in string format.
2. Extension Matters
Always use .html as your file extension.
3. Validate Your HTML Code
Use an HTML validator to check for any errors or issues in your code.
4. Formatting Matters
Always keep your code well-formatted, it makes your code readable and maintainable.
5. Title Tag
Use the title tag to improve accessibility for users and search engines.
6. Semantic Tags
Use semantic tags to give meaning to your HTML code. They help search engines and assistive technologies to understand the structure of your web page.
*7. Folder Structure *
A clear folder structure is a must. Create separate folders for styles, javascript, fonts, images, and other files.
8. External Styles and JavaScript
Use external CSS and JavaScript files instead of inline styles and scripts. It keeps your code clean and reduces the overall size of your HTML file.
9. Avoid Inline JavaScript Events
Avoid using inline JavaScript events, instead, use IDs or HTML elements to refer to JavaScript.
10. Optimize Your HTML Code
Always strive to optimize your HTML code, it helps to reduce the loading time of your web page and enhances the user experience.
In conclusion, writing clean HTML code is an art, and like any art, it takes time and effort to perfect. Keep these 10 tips in mind, and you will be well on your way to writing clean, optimized, and accessible HTML code.
Happy learning!
Top comments (1)
Ok, so, as far as HTML goes, you got a lot of things right.
However, here's my list that i think should be added as a complement/extension to yours.
Disclaimer: I'm still missing quite a few things about HTML, but it's my 2 cents right now.
You almost never build websites in just HTML anymore. Everyone uses frameworks and backends to render HTML so much so that most react devs have trouble writing a plain HTML page properly after a while. So the whole "use .HTML" extensions is kind of pointless. It's better for a new dev to go straight into a framework of some kind so they have more tools in their belt when applying for work. There ARE HTML-only jobs, but they are not common.
Your list is missing META tags, probably the most important tags since they tell the browser the "canonical" url of the page, the meta "description" for Search Engines, and also potentially geo location information and other data. Most important is also the viewport meta tag since it allows responsive CSS to work correctly.
Structured data should also be added to HTML using the appropriate tag attributes or a JSON object [the json option seems more popular as it's easier to manage and track]
You mentioned keeping your code "Accessible" at the end, but there was no mention of having a skip link, and proper tab order. You did mention "semantic tags" which are kind of a broad scope, so more detail would've been nice.
This last one maybe falls under that broad "semantic tags" scope as well, but use H1 tags for your page content titles and make sure there is only one H1 tag per page followed by a hierarchy for the content that has H2-H6 in use as needed. This is incredibly important for SEO as well if you want your content to rank.
Anyway that's all i got for now. :)