BracketBoy's Guide to Coding Effective HTML

The Web since the 90s

If you have been around since the era of Netscape and table based websites, then you have come a long way. Nowadays, we have a while new system of coding HTML; the while process has evolved from being static to being purely dynamic. With the emergence of mobile devices, Web Developers have found a while new way of coding that can cater to the resolution needs of various smartphones and tablets.

An effective HTML consists of several elements, to name a few: Responsiveness, Completion of tags(all tags must be closed), Heirarchy, Accessibility, and Readability.

Heirarchy
- - HTML tags must be written in order and properly nested. For example, li tags should be inside ul tags and not the other way around. H2 tags should be under H1 tags, as like all written code, HTML is read from top to bottom. Make sure to be clear about how your HTML is read by the web, especially by important crawlers, like google. It is also important to have an awesome text editor. Notepad won't do. I for one, use Notepad++ and Sublime, you can try those out here: Sublime Text and Notepad++
Accessibility
- - The internet is being used by people with diverse abilities and disabilities. We need to design our websites properly so that it is accessible to everyone visiting your website! Some examples of users to take into consideration are old people and people who are visually impaired.
  - Alternative text for image or the alt attribute for short. These could help visually impaired people to "see" the images using screen readers that reads aloud everything on your website, most especially the alt text on your images.
  - Keyboard Input. or a mouse alternative. Some people under certain circumstances cannot use the mouse. A good keymapping alternative to navigate your site is a good accessibility feature.
- Learn more about web accessibility here.
Readability
- - A readable code is simply a code that isn't messed up. A lot of devs often rush writing their html that their end result is sloppy, messy, and outright unreadable, even to the web. A readable HTML code is often composed of proper indentation and comment blocks on important sections.
- In some cases, some people opt to compress their html codes for security and file size effeciency but it is in your complete discretion to do so.

The Magic of HTML 5

HTML5 is the new HTML. We have evolved from HTML, to XHTML, and now a new and more advanced technology that is so powerful, you can even make games with it. Yes! I'm not even kidding. Paired with the awesome CSS3, your frontend jedi powers will be unstoppable! With html5, you will never have to embed videos using old markups again because there's a native html5 media player. There are also premade web elements like input boxes and buttons that are all visually appealing as it is fully functional. HTML5 is also automatically paired with Javascript, so the animations you could do with your website is so endless, your imagination is the only limit. click here to learn more about HTML5 and it's awesomeness!

Below is W3C's own markup checker. Feel free to use it and check if your website's HTML is as pretty as you think it is.

What is an effective HTML code?

The Web since the 90s

Try out W3C's Markup Validator!