https://www.youtube.com/watch?v=MQyTQ-OjDIk
10 HTML Coding Tips for Beginners
It is incredibly easy to set up a website nowadays even without coding skills. However, it pays to learn front-end languages to understand how your website truly works. HTML is the most popular front-end language, and fortunately for you, it is easy to comprehend.
- Take online tutorials
The internet is full of HTML coding tutorials that cover a broad range of topics from the basics to advanced HTML coding. These tutorials have been resourceful for millions of programmers, and they will be a good starting point for you. As such, begin by studying basic HTML tutorials; YouTube videos are the best tutorials as they are engaging and illustrative.
- Use style sheets whenever possible
There are three main advantages of using style sheets for HTML coding. For starters, they allow for greater control of how your pages look, and we cannot emphasize the importance of good design and appearance well enough in website design. Second, style sheets automate some tasks; for instance, you can say goodbye to inserting <font> tags everywhere.
However, the greatest benefit of using style sheets is that you do not have to revise the whole code to change a page’s appearance. You only need to edit one style sheet to execute changes and rectify mistakes.
- Use non-breaking spaces
Words often wrap in HTML coding, especially if they fall at the end of a line. It is a common problem that bothers many beginners, yet it is surprisingly simple to overcome. The trick to prevent wrapping in your content is to use non-breaking space. The code for non-breaking space is
For example, consider the following code: <p> The world is yours </p>. The words “is” and “yours” will wrap if the fall at the end of a line. As such, the code should be written as <p> The world is yours </p>.
- Use relative URLs for embedding images
Most beginners embed URLs by using the <img> tag which works just fine on the desktop, but the images may appear broken when uploaded on the website. It is advisable always to use relative URLs whenever possible to avoid this embarrassing mistake. Relative URLs can work perfectly wherever you locate the pages and images. However, both have to be in the same location for relative URLs to work. Alternatively, you can use images that are relative to the document root.
- Specify width and height in your images
Have you ever come across those websites that take unusually long to load pictures? These delays are caused by failure to specify image width and height when using the <img> tag. It is because the internet has the task to configure the images’ sizes and layout. As such, it is always important to specify width and height in your codes. For instance, image codes should look like this: <img src=”jaden.jpg”> width=”135” height=”73”>.
It is important because loading speeds affect the performance of your website as most users are not patient.
- Use an HTML validator
It is important to proofread your HTML code before executing it. However, you do not have to review each line as long as you have an HTML validator. The validator scans and reviews your code to identify problems such as incorrect tags. It also tests the code to determine whether it is compatible with all browsers.
Using an HTML validator will help you overcome small mistakes that may ruin the quality of your website or have you chasing your tail. Besides, it is an excellent way to learn from your mistakes.
- Always close your tags
It is important to always use a corresponding close tag for every opening tag. For instance, if you open with a <b>, then make sure to close with a </b>. For example: <b>The world is yours</b>. Failure to do this will result in complications as your pages will not work properly on some browsers.
However, it is important to note that some tags such as <img> do not need corresponding close tags.
- Be cautious with your HTML comments
HTML comments help to keep your readers engaged and make your markup more readable. Web browsers usually ignore these comments, but HTML makes it easy to add them to your pages. A standard code for an HTML comment looks like this: <–The world is yours –>.
HTML comments are helpful, but you should not use too many of them as they add to a page’s size, and consequently the time it takes to load.
- Keep up with updates
HTML is constantly evolving, and each update works to the benefit of your website. As such, it is important to keep up with updates and adopt them soon after they are released to stay ahead of the curve.
- Learn CSS
You will occasionally be required to combine HTML with CSS and other front-end languages at different stages of your website’s creation. As such, it helps to learn the basics of other front-end languages, especially CSS and JavaScript.