Rules for writing HTML
Even though HTML is not a programming language, it has some rules and conventions that help developers put out clean, easy-to-read, and maintainable code.
1. HTML File Extensions
HTML files must always have the extension .html or .htm. For example, a testimonials page could be called testimonials.html
2. Always have an index.html file in your workspace
Whenever you are building a new website, always make sure you have an index.html file at the root of your workspace. This file works as the entry point of your entire website. If you don't have it, you won't even be able to deploy your website to the internet.
Once you have your index file, then you can begin to add other page files as neccessary such as an about.html or contact.html and so on and so forth.
3. Always declare the document type
In HTML5, we declare the document type by adding the line <!DOCTYPE html>. By doing this, you tell the browser that you are about to write code using HTML5 standards. Always declare this line at the very top of your document.
4. Use lowercase element and attribute names
Once again, HTML is not a programming language. Therefore, it is not case sensitive. This means that if you declare a section using the section element, you can declare it in lowercase or in uppercase.
This means that <section> and <SECTION> will both render a section in your webpage.
However, it is not recommended to use uppercase letters because they are hard to read. The convention is to use lowercase letters because they are both easier to read and write, and the overall code is prettier.
Also, do not mix lowercase and uppercase letters, such as seCTion. Even though it will not break your website, if you go back to your code in a few weeks or months, you are going to experience self-inflicted intellectual torture.
5. Only have one <h1> per page
In HTML, headings are numbered h1 to h6, with h1 being the biggest heading, and h6 being the smallest heading. For every unique page in your website, you should always have a h1 tag, and it should be the only one for that entire page. However, you can have multiple of the rest of the headings. This is because web crawlers always search for the h1 to quickly know what your website is about, and therefore improve your search rankings in search engines.
6. Always close corresponding tags
"Every action has an equal and opposite reaction", said Newton. HTML replied and said, "Yes. And almost every opening tag must have an equal and corresponding closing tag".
HTML tags are opened by surrounding the element name with angle brackets(<>) and they are closed by adding a forward slash (/) after the first opening angle bracket (</>). Take a look at the example below:
<!DOCTYPE html>
<html>
<head>
<title>learnerspree</title>
</head>
<body>
learnerspree is an amazing platform for learning web development.
</body>
</html>Notice how all the opening tags have their corresponding closing tags. The top <html> element has its closing </html> tag at the bottom. The head, title and body elements also have their corresponding opening and closing tags.
Note however, that there are some tags that don't need to be closed in order for them to work - but it is recommended that you close them. For example, the code block below gives an example of the <p> (paragraph) tag which is used to render text to the screen.
<p>Some text here
<p>Some other text here
<p>Some text here</p>
<p>Some other text here</p>The first block is not closed. The second block is closed. Even though they do the same thing, the second way is the recommended way to do it as it also helps to avoid confusion, and to follow the convention so that other people can also read and understand your code, and help you out by contributing to your codebase.
7. Close empty elements
We have just seen how we should always close all opening tags. Now, we are going to go further and learn that even though the premiering statement is true, there are some elements that are exempt from this rule.
Some elements have an opening tag but they do not have a corresponding closing tag. These elements are called "self-closing tags" or "empty elements"
Examples include:
<meta />- used to add metadata in your website<img />- used to add images to your website<input />- used to create an input element<br />- introduces a line break (new line) in your document<hr />- introduced a horizontal line<link />- is used to link stylesheets<source />- used to link multiple sources of a piece of media
Notice how they all have a space and then an ending forward slash? These are completely optional. You can safely remove them and remain with only the angle brackets and the tag name: such as <meta> or <input>. Both ways are an acceptable convention.
8. Always quote attribute names
Attributes are used to give additional information about an element, and they usually come in key-value pairs: i.e name="some_name". For example, I can add a height attribute to a section as follows:
<section height="100px">...some text...</section>The attribute name is always placed in quotation marks.
The following are the most common types of attributes:
href- is used to define a hyperlink that links to external web pages, or to other pages within the same website.
Example:
<a href="https://learnerspree.com/blog">Read More</a>src- is used together with theimgtag to define the relative path or internet link to the image to be displayed.
Example:
<img src="https://learnerspree.com/logo" />width- is used to define the width of an element.
Example:
<img src="https://learnerspree.com/logo" width="200px" />height- is used to define the height of an element.
Example:
<img src="https://learnerspree.com/logo" height="200px" />alt- is used together with theimgtag to define some text that will show to the user in case an image fails to load. Make sure to make this descriptive enough for both people and machines to understand. People because it is informational, and machines because they index your webpage andaltattributes improve your SEO and ranking in search results.
Example:
<img src="https://learnerspree.com/logo" alt="learnerspree logo" />style- is used to define CSS styles that will only apply to that specific element.
Example:
<section style="background-color: red">...some text...</section>lang- is used to define the language of the document.
Example:
<html lang="en">title- is used to create a tooltip that will show when the user hovers over the element that has this attribute.
Example:
<a href="/next-page" title="Click me to go to the next page">Next Page</a>9. Always specify an alt attribute for images
alt attributes are used to give information about images in case they fail to load. This can be helpful to end users because, rather than sitting and waiting for an image that will never load, they will see the text, and perhaps reload the page.
Example:
<img src="https://learnerspree.com/logo" alt="learnerspree logo" />HTML does accept that decorative images such as icons do not need to have an
altattribute. However, frameworks such as NextJs have rules to ensure that all images havealtattributes in order to keep with the standard for web development.
10. Avoid long code lines
It is good practice to always limit your code lines to 80 characters per line. Formatters such as Prettier have this rule in place so that when single code lines exceed 80 characters, they break up the line.
11. Avoid unnecessary spaces
In HTML, empty spaces are ignored. For example, if you have a line of code like:
<section name = " mysection ">...some text...</section>and another one:
<section name="mysection">...some text...</section>They will both render the same thing to the user. These kinds of spaces are unnecessary in HTML and should be avoided. They make your code harder to read and they are also harder to type.
12. Add Blank lines when necessary
A good practice when writing code in any language is to always separate large blocks of code using blank lines. This helps make your code readable and easy to maintain and debug.
For example:
<section>
<p>This is some random text</p>
<p>Particular unaffected projection sentiments no my.</p>
</section>
<section>
<p>Music marry as at cause party worth weeks.</p>
<p>At could merit by keeps child.</p>
</section>
<section>
<p>While dried maids on he of linen in.</p>
<p>Saw how marianne graceful dissuade new outlived prospect followed.</p>
</section>
<section>
<p>Uneasy no settle whence nature narrow in afraid.</p>
<p>Particular unaffected projection sentiments no my.</p>
</section>The above example quickly becomes hard to read, tiresome to maintain, and cumbersome to debug. This can easily be fixed by adding empty lines in between the sections, as below:
<section>
<p>This is some random text</p>
<p>Particular unaffected projection sentiments no my.</p>
</section>
<section>
<p>Music marry as at cause party worth weeks.</p>
<p>At could merit by keeps child.</p>
</section>
<section>
<p>While dried maids on he of linen in.</p>
<p>Saw how marianne graceful dissuade new outlived prospect followed.</p>
</section>
<section>
<p>Uneasy no settle whence nature narrow in afraid.</p>
<p>Particular unaffected projection sentiments no my.</p>
</section>13. Add proper indentation
Use proper indentation whenever possible in order to make your code easier to read. Consider the examples below:
Example 1:
<body>
<article>
<h1>Welcome to self-taught learning with learnerspree</h1>
<p>
Learn programming, transcription and even cybersecurity with our extensive
documentation
</p>
<button>Show me how</button>
</article>
</body>Example 2:
<body>
<article>
<h1>Welcome to self-taught learning with learnerspree</h1>
<p>
Learn programming, transcription and even cybersecurity with our extensive
documentation
</p>
<button>Show me how</button>
</article>
</body>You can quickly tell using example 2 that has the proper indentation, that it is not only easier to read, but you can also tell the hierarchy of the elements. Therefore, always use proper indentation, which is usually 2 spaces. If you have a Formatter installed, it can enforce this rule for you so that you don't have to keep adding spaces manually.
14. Always have the title element
The title element describes the what the document or website is about. This is important to not only search engines but also to end users who will immediately know what the website is about. The title element should always be placed in the head section of your html document.
15. Always have the html, head, and body tags
Even if you do not have these tags present in your document, the browser is intelligent enough to detect it and add them in automatically.
However, you should always have them in because if you don't have the head tag, then where will you place your metadata and link your stylesheet? And without the html tag, then how would you define the primary language of your document? And without the body tag, then how would you know where to start and stop adding content to your website?