HTML Tips and Tricks for Beginners

HTML Tips and Tricks for Beginners

 

HTML Tips and Tricks for Beginners

HTML Tips and Tricks for Beginners | Melkweg Technologies

 

Close Your Tags:

Closing the tags is the most important thing to do when it comes to programming. You may have misplaced a “.” somewhere and the whole code goes kaput. It’s exactly the same when it comes to HTML. It is a very bad practice to leave the tags opened and it is always advised to close your tags. ALWAYS. Or else it will lead to validation errors and most importantly, your code breaks so does the whole webpage view.

<ul>
  <li>Some text here. </li>
  <li>Some new text here. </li>
  <li>You get the idea. </li>
</ul>

Declare the Correct DocType:

1. Validate the CSS file. Fix any necessary errors.
2. Add a doctype.

The DOCTYPE goes before the opening of html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup.


Never Use Inline Styles:

It’s always recommended to use external style-sheets. Inline styling is just BAD in SEO terms.

HTML Tips and Tricks for Beginners

Inline Style | HTML Tips and Tricks for Beginners

 

 

 

 


Javascript Files at the Bottom:

If you have JS files whose only purpose is to add functionality in your website, place those files at the bottom, just before the closing body tag. This is the best practice.


Wrap your Navigation with an Unordered List:

Each and every website has a navigation section. You can code the navigation as below:

<ul id=”navigation”>
<li><a href=”#”>Home</li>
<li><a href=”#”>About us</li>
<li><a href=”#”>Servies</li>
<li><a href=”#”>Contact</li>
</ul>

Images Require “Alt” Attributes:

Its easy to ignore the necessity for alt attributes within image tags. If the image fails to load, alt name will be displayed.

HTML Tips and Tricks for Beginners

Alt Tag | HTML Tips and Tricks for Beginners


Use HTML comments:

It’s a good habit to give the comments. To make your HTML code clearer for you and for the other person who will work after you.

Better to follow the structured method to write the code.

<html>
<head>
<!-- Title -->
<title>Melkweg Technologies</title>
<!-- Meta information -->
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Melkweg Technologies" />
<meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<p>Welcome to Melkweg Techonologies</p>
<ul> <!-- Menu Starts Here -->
<li><a href=”#”>Home</li>
<li><a href=”#”>About us</li>
<li><a href=”#”>Servies</li>
<li><a href=”#”>Contact</li>
</ul> <!-- Menu Ends Here -->
</div>
</body>
</html>