It’s important to indent properly so that you make less mistakes when structuring you HTML. It easy easier to read your code when it is indented properly, and can help avoid issues where bad markup is actually causing the layout of your page to break.
→ Use an HTML formatter tool to help with indentation
Make sure to close your <html> and <body> tags. The last thing in your html documents should always be a </html> tag. A basic HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Title of my page</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<!-- Your code goes in between the body tag -->
</body>
</html>
Lists and nested lists
When you use lists in your HTML, make sure to nest <ul> and <li> tags properly. The only element that is valid inside a <ul> tag is an <li> tag. Notice in the example below that the nested list is inside another <ul> tag.
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
Absolute vs relative links
When using a relative link back to your repository’s homepage, it should look something like this.
Relative link: <a href="../../index.html">My home page</a>
Absolute link: <a href="http://dylanfisher.github.io">My home page</a>
Absolute link to a file on your local computer. This will not work when you push the files to GitHub. Use relative links whenever possible.
Indentation
Proper HTML structure and closing tags
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title of my page</title> <link rel="stylesheet" href="style.css"></head><body> <!-- Your code goes in between the body tag --></body></html>Lists and nested lists
<ul> <li>Item 1</li> <li>Item 2 <ul> <li>Nested item 1</li> <li>Nested item 2</li> </ul> </li> <li>Item 3</li></ul>Absolute vs relative links
Using spaces in file names