Organizing your code

Indentation: Lining Up your Code

One of the first things to understand about HTML is INDENTATION. Proper indentation leads to a better hierarchy and more uniformed page as well. Using proper indentation or alignment, helps you to see your code in the easiest fashion possible. Down the road you may develop your own particular style but starting out, it's best to follow something similar to the image on this page and using the Parent-Child hierarchy to keep things aligned. Notice in the image how the elements are set up.

	
	<!DOCTYPE html>
	<html>
	|	<head>
	|	|	<meta charset="utf-8">
	|	|	<meta name="viewport" content="width=device-width, initial-scale=1">
	|	|	<title>Proper Indentation</title>
	|	</head>
	|	<body>
	|	|
	|	</body>
	</html>

Page Container: Visual to help explain Parent-Child Hierarchy

That being said, the HTML hierarchy or "page container" (see image) helps to visualize what "good" code should look like. The graphic helps to explain things a little further without having to get tied up in code itself. Notice how each parent element is on the same vertical line and each child element is on their own vertical line? Think something similar to a bullet list in a word document.

Tooltips: A little extra information

What is a tooltip? A tooltip is defined as a "brief informative message that appears when a user interacts with an element in a GUI or graphical user interface." This website uses tooltips with each image on the page! Move your mouse over to the page container image. It should highlight (become active) and text should appear at the bottom of the image. Isn't that cool?!?