10 HTML Coding Tips Every Designer and Developer Should Know

Since its creation, HTML has been the driving force behind millions of websites and has virtually swept across the internet world. HTML or Hyper Text Markup Language is a standard markup language that comes in handy for creating web pages. Since HTML is the first thing that every web designer learns, it is very likely that most of you reading this would already have an idea about the tags and elements of HTML. 

Good knowledge and skills in HTML also helps while dealing with script languages like PHP and Javascript. Being familiar with a programming language is one thing, but the needs of the present times requires individuals that have complete mastery in their art and therefore it is important to understand every possible detail about the programming language you are interested in. 

Check out our HTML course online tailored to your HTML development needs.

Below are some tips that will help you while working on HTML and will surely give you an edge while designing your webpage.

1. Keep it simple

The first and the most basic tip, is to keep it as simple and readable as possible. In fact, it is a rewind to the lessons that you must have learnt while studying HTML. Remember, it is not Paint where you can play with the colours and boast about your creativity, it is a webpage that people will read and therefore it must look like one. Do not use fancy fonts and inappropriate text sizes. The colour of the text must not be too bright as well. Understanding how to put content is as important as the quality of the content that you plan to put. 

2. Have a genuine title to every page

As HTML designers gain more knowledge, they sometimes neglect the <title> tag from their WebPages.  It is important to understand that even though having a title on the page is not very important when you are dealing with a couple of pages, however; while working on a complete website that has a lot of pages, having a title will bring great joy, both to the designer and the user. Applying CSS, updating content, making changes, all becomes a lot easier when you have titles on the pages.

3. Let the user take control

How will you feel if a stranger enters your house and starts telling you what to do and where to keep your things? It will be really irritating right? Well, that is exactly how the user will feel if you resize his browser window and open the links in new tabs without him wanting to do it. If the user wants the link in a new tab, let him do it by himself. Make sure the audio or video file (if there is any) does not start by itself. Do not have unnecessary links and pop-ups on your image. It gives a bad impression about the webpage and the designer.

4. Add alternate text to images

Sometimes your WebPages will not show the images that you have put and instead will just have a placeholder at the display. It may be caused due to the web browser settings, however; it affects the overall look and layout of the impression. A normal user will not think about the issue with the browser and will interpret this as a fault in the website design. Therefore, to avoid this scenario, it is always a good practice to have alternate text in the HTML code. 

Eg:

A great sport!!! <img src="images/football.gif" alt="Football" align="middle">

In the above example, even if the image fails to open, the alternate text “Football” will be displayed. 

5. Never say “click here”

Imagine you want to create a link to one of the videos that you have shot related to the topic discussed on the webpage. Now a lot of people will make the mistake of writing “click here” and then adding the link of the video to it. Make sure you are not one of them. Writing something like “Check out this video for more information on the topic” and then creating a hyperlink on the word ‘video’ is a far better and mature option. It shows that you are not trying to conceal anything and brings down the user’s concerns of spam links on the webpage.

6. CSS is better than HTML Tables

When it comes to websites, the option that provides more features and a faster response time is always the better alternative. HTML tables were a great utility in the past, but since CSS has been introduced, using the latter which is also more reliable, is the intelligent choice.

7. Keep the URL’s local

The URL’s that you use in your webpage ultimately have an impact on the loading speed of the website. Having a URL that takes the user through the servers for every page slows down the website. Therefore, if you have the option of using local URL’s or HTML pages, take it without a second thought.

Eg: 

<a href="http://www.html_tips.com/tutorial/tips_6.html"> //Slows the webpage
<a href="tips_6.html"> //Much better option

8. Navigation structure

You definitely do not want the user to get lost while scrolling through different pages on your website. A lot of young HTML learners tend to forget about having a uniform and simple navigation structure in their website while they load the website with different pages and links. Do not confuse the user with multiple navigation areas. The last thing you want is the user to select an option from the ‘other’ navigation map and end up at a different page from the one he intended to land on. 

9. Control scrolling

Reading text on a page that has both horizontal and vertical scrolling becomes both, difficult and frustrating. While designing your webpage using HTML, you must ensure that it has scrolling in only one direction, preferably vertical scrolling. Aligning and proper placing of the text on the webpage will ensure that the website turns out to be user friendly in the true sense.

10. Test Runs

The biggest problem that WebPages and different style of HTML designing face, is not finding the proper and sufficient support in the web browsers. Having a rectangular box on display because the browser was not capable to output the content; is a major turn off for the user. Therefore, to avoid there situations, as a HTML designer, you final work must be to check the website’s display on different web browsers and make the required changes accordingly. The saying, “Don’t judge a book by its cover”, does not hold true for WebPages because the better your display looks, the more appreciation your Webpage gets. 

Check out http://stoneriverelearning.com/ for courses tailored to your HTML development needs.

GET YOUR FREE HTML EBOOK!

Online Technology Courses Stone River eLearning

Comments