Formatting Your HTML Code
💡
Essential Question: Can you write HTML that demonstrates a parent-child relationship between two elements?
One other thing that’s going to be super important in this class is writing clean HTML. When I say “clean” what I’m referring to is the overall organization of your code. As we’re about to get into in the next module, having clean code makes sure your code is easy to read and understand the next time you open up the file. Can you imagine opening up a file where all the HTML was written on a single line and you have to read all of it to find what you need to change?
Here’s What I Mean…
<!DOCTYPE html><html><body><header><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1></header><aside><h2>Some nice heading</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</aside><main><article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></article><article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></article></main></body></html>Yikes, right?!
Here’s a Better Way to Write That…
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</header>
<aside>
<h2>Some nice heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<main>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</main>
</body>
</html>Much, much cleaner! This is exactly how I’d like to see your HTML formatted in your assignments.
Two Tips For Writing Clean HTML
Different developers have different ways of organizing their code, and there’s no such thing as a “best” way to do it. But if you adhere to the following two tips, you’ll find that most of the code you write will be pretty darn squeaky clean.
- Use line breaks between elements. Putting elements on their own line when adding them to your code will help break things out to be more scannable.
- Use indentations. If you have one element that is inside of another element, we call the outer element the parent and the inner element the child. When adding a child element to a parent element, put the child on a new line and then press the Tab key to indent the child. This way, it’s much easier to see the parent-child relationship.
<div class="parent-element">
<div class="child-element>I am a child element.</div>
<div class="child-element>I am a another child element.
<div class="child-element>I am a child of a child element.</div>
</div>
</div>I expect to see your code follow these two rules as we write HTML together in the next modules. If you ever doubt yourself, try using an online tool to help format the code for you.
▶️ Video: Formatting HTML Lecture
Please watch the following video for a recorded lecture of the concepts presented in this lesson.
Check Your Understanding
Can you answer the following questions?
- What is the correct format for writing an HTML comment?
- Which of the following examples demonstrates a parent-child relationship between two elements with correct formatting?
<main>
<article></article>
</main><main></main>
<article></article><main><article></article></main>Show me the answer!
The first example correctly demonstrates a parent-child relationship between the two elements by nesting the article element inside of the main element on a new line with an indentation.