Happy New Year to all my readers! On the very first day of 2021 let's talk about some basics of HTML which are really important.

HTML the base of the website. It should be more concise, clean, and as per standard. A lot of people think we have to focus on functionality. HTML is just a layout structure. But believe me, HTML is as important as functionality.

1. Doctype & Viewport

The doctype declaration should be the first thing in your HTML documents. The doctype declaration tells the browser about the XHTML standards you will be using and helps it read and render your markup correctly.

The viewport is the user's visible area of a web page. The viewport varies with the device and will be smaller on a mobile phone than on a laptop or computer screen.

2. Don't use block element in inline element

I saw a lot of times people are using block element in an inline element which is really bad practice. A block-level element is one that starts from the new line and takes up the full width available. An inline element does not start on a new line and it only takes up as much width as necessary.

Ex. Don't use div tag in span, b, i, a, label, strong, etc. tag. Div is a block-level element.

Don't use the button tag in the anchor tag. The anchor tag is different & the button is different. If you are using anchor tag then there is no need for a button tag and if you are using a button tag then there is no need for anchor tag. Never do like :

3. Don't use too much divs

After HTML5 sementic html we have sementic tags like header, footer, section, aside, etc. so there is no need to use like

instead of this just use if you want you can add header class in header tag and use that in css.

4. Learn where to use which heading tag

Every page should contain one h1 tag or SEO purpose. Then you can use h2-h6 tags wherever you need. Define headings CSS (font-size & weight) at the beginning of the CSS file.

5. Do proper commenting

Make your habit to add comments on each section start & end. So if other people see your code they can understand very easily.

Nowadays people are not giving too many comments because we have semantic elements that are self-explanatory. But for sections, you can give for better understanding.

6. Stop using inline CSS

Yes, there is three types of CSS inline, internal & external. But the best way is to use external CSS.

7. Keep CSS & JS at proper place

Keep scripts before the body closing tag. Link CSS files in the head tag.

8. Header separation

If a header is coming in the banner then manage it with position(CSS) don’t keep it in the banner section. The header, footer should be separate from other sections.

9. Validate Your Code

Validation should not be the end-all evaluation of good work versus bad work. Just because your work validates doesn’t automatically mean it’s good code; and conversely, a work that doesn’t fully validate doesn’t mean it’s bad.

But auto-validation services such as the free W3C markup validation service can be a useful debugger that helps you identify rendering errors. Make a habit to validate frequently.

10. Do not use # in the anchor tag. If you don’t have a link for now then add javascript:void(0).

11. If you are using bootstrap do not directly customize with their classes. Add one parent class or on the same element then change styling.

12. It is an industry-standard practice to keep your markup lower-cased. Capitalizing your markup will work and will probably not affect how your web pages are rendered, but it does affect code readability.

Once again a very happy new year. This year we all devs will focus on new technologies. As we know Learning never ends... Happy Learning :)