<![CDATA[ freeCodeCamp Curriculum Guide - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ freeCodeCamp Curriculum Guide - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Tue, 26 May 2026 04:44:22 +0000 60 <![CDATA[ How to Indent HTML Code – And Why it's Important ]]> https://www.freecodecamp.org/news/how-to-indent-in-html-and-why-it-is-important/ 66b8d98bf0d0708280f1346c Wed, 01 Jun 2022 15:40:55 +0000 When you are building out HTML files, it's really important to indent your code. But how do you do that in HTML and why is it important?

In this article, I will show you how to properly indent your HTML files and explain why it is important to properly format your code.

How to Indent Your Code in HTML

Whenever you have HTML elements nested inside other HTML elements, it's best to use indentation. Nested elements are known as children of their parent element.

In this example, I have a p element nested inside a div element. To indent the p element, I will move it two spaces to the right.

<div>
  <p>This is what indentation looks like for HTML</p>
</div>

This is considered best practice and will make your code more readable by other developers. Now we can see that the p element is nested inside its parent element which is the div.

In this next example, I have an h2 and p element nested inside a main element without indentation.

<main>
<h2>Let's learn about indentation</h2>
<p>There is no indentation here</p>
</main>

But if I edit the code by moving the h2 and p elements two spaces to the right, now we have proper indentation.

<main>
  <h2>Let's learn about indentation</h2>
  <p>This is indentation</p>
</main>

The h2 and p elements are children of the main element.

Commonly Used Examples of Indentation in HTML

Unordered lists

The li elements are indented two spaces to the right and nested inside the ul element. The ul element is the parent of the li elements.

<ul>
  <li>Cake</li>
  <li>Pizza</li>
  <li>Salad</li>
  <li>Apple</li>
</ul>

Ordered lists

The li elements are indented two spaces to the right and nested inside the ol element. The ol element is the parent of the li elements.

<ol>
  <li>Drive 1.2 miles and turn left on Cherry lane</li>
  <li>Drive 4.5 miles and turn right on Sycamore Rd.</li>
  <li>Drive 400 feet and stop at the light</li>
  <li>Turn left at the light</li>
  <li>Arrive at the destination on your right</li>
</ol>

Why is Indentation Important?

When you are writing code, it is important to write code that is readable by other developers. A large part of readability is properly indenting your HTML.

In this example, I have copied all of the code from the Learn HTML by Building a Cat Photo App project and removed all of the indentation to show you what poor code formatting looks like. 

<html lang="en">
<head>
<title>CatPhotoApp</title>
</head>
<body>
<h1>CatPhotoApp</h1>
<main>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>
Click here to view more
<a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.
</p>
<a href="https://freecatphotoapp.com"
><img
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
alt="A cute orange cat lying on its back."
/></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
alt="A slice of lasagna on a plate."
/>
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
alt="Five cats looking around a field."
/>
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label
><input
id="indoor"
type="radio"
name="indoor-outdoor"
value="indoor"
checked
/>
Indoor</label
>
<label
><input
id="outdoor"
type="radio"
name="indoor-outdoor"
value="outdoor"
/>
Outdoor</label
>
</fieldset>
<fieldset>
<legend>What's your cat's personality?</legend>
<input
id="loving"
type="checkbox"
name="personality"
value="loving"
checked
/>
<label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy" />
<label for="lazy">Lazy</label>
<input
id="energetic"
type="checkbox"
name="personality"
value="energetic"
/>
<label for="energetic">Energetic</label>
</fieldset>
<input
type="text"
name="catphotourl"
placeholder="cat photo URL"
required
/>
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer>
<p>
No Copyright -
<a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
</p>
</footer>
</body>
</html>

This is not good HTML practice at all because it is really difficult to read and understand what the code is doing. If you tried to submit something like this in a professional developer setting, your team would not be happy with you at all.

Now I am going to take that exact same code and properly indent it to show you the difference. 

<html lang="en">
  <head>
    <title>CatPhotoApp</title>
  </head>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>
          Click here to view more
          <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.
        </p>
        <a href="https://freecatphotoapp.com"
          ><img
            src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
            alt="A cute orange cat lying on its back."
        /></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img
            src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"
            alt="A slice of lasagna on a plate."
          />
          <figcaption>Cats <em>love</em> lasagna.</figcaption>
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img
            src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
            alt="Five cats looking around a field."
          />
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label
              ><input
                id="indoor"
                type="radio"
                name="indoor-outdoor"
                value="indoor"
                checked
              />
              Indoor</label
            >
            <label
              ><input
                id="outdoor"
                type="radio"
                name="indoor-outdoor"
                value="outdoor"
              />
              Outdoor</label
            >
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input
              id="loving"
              type="checkbox"
              name="personality"
              value="loving"
              checked
            />
            <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy" />
            <label for="lazy">Lazy</label>
            <input
              id="energetic"
              type="checkbox"
              name="personality"
              value="energetic"
            />
            <label for="energetic">Energetic</label>
          </fieldset>
          <input
            type="text"
            name="catphotourl"
            placeholder="cat photo URL"
            required
          />
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>
        No Copyright -
        <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
      </p>
    </footer>
  </body>
</html>

This is much easier to read and now we can see all of the nested child elements inside their parent elements and understand what the code is doing.

Conclusion

When writing HTML it is important to properly format your code using good indentation. You can indent elements by moving them two spaces to the right. 

<main>
  <h2>Let's learn about indentation</h2>
  <p>This is indentation</p>
</main>

This will make your code more readable by other developers and shows the relationship between the child and parent HTML elements.

I hope you enjoyed this article and best of luck on your developer journey.

]]> <![CDATA[ How to Open a Link in a New Tab – HTML target blank Attribute Explained ]]> https://www.freecodecamp.org/news/how-to-open-a-link-in-a-new-tab/ 66b8d997d482a18d3e028269 Tue, 31 May 2022 14:53:07 +0000 There will be times where you will want your user to click on a website link and have it open in a new browser tab. But how do you do that in HTML?

In this article, I will show you how to use the target="_blank" attribute through code examples. I will also talk about when you should consider using this attribute.

How to Open Up a New Browser Tab Using target="_blank"

The target="_blank" attribute is used inside the opening anchor tag like this:

<a href="website-link-goes-here" target="_blank">

When the user clicks on the link, a new browser tab will automatically open to that page.

In this example, I have nested a link inside a set of paragraph tags to direct people to freeCodeCamp. 

<p>To learn how to code for free, please visit <a href="https://www.freecodecamp.org/learn" target="_blank">freeCodeCamp.org</a></p>

When you click on the freeCodeCamp link, then it will open up a new browser tab for you.

If I were to omit the target="_blank" attribute, then the default behavior would be to leave the current web page and go directly to the link without opening a new browser tab.

What is the noopener Keyword?

The noopener keyword in the rel attribute is used primarily for security reasons to prevent malicious users from messing with the original web page through the [Window.opener](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener) property. If the malicious user gained access to your window object then they could redirect your page to a malicious URL.

You can use the noopener keyword as a way to help prevent that security issue from happening. Here is how the noopener keyword is used:

<a target="_blank" rel="noopener" href="https://devdocs.io/html/element/heading_elements">DevDocs documentation</a>

If you want to learn more about the security concerns that rel=noopener helped solve, then please read through this helpful article.

Updates to the noopener keyword

In 2021, there was an update made where modern browsers now set rel=noopener to any link using the target=_blank attribute. As you can see in this Can I use table, the noopener keyword is supported by most browsers except for Internet Explorer 11.

Even with this update, a lot of developers will still use rel=noopener for links using the target=_blank attribute.

Should You Use the target="_blank" Attribute All the Time?

When users click on a link, the default behavior is to have that link open on the current page they are on without opening a new browser tab. In a lot of cases, you do not want to change this default behavior because users have grown to expect this.

You have to think carefully about when it would be a good time to use the target="_blank" attribute. One good example would be if a user is working on a page and they don't want to leave that page if they click on a link.

In this example, we are linking to the DevDocs documentation, so the user can stay on their current page and look up a reference on a new tab.

Conclusion

You can use the target="_blank" attribute if you want your users to click on a link that opens up a new browser tab.

The target="_blank" attribute is used inside the opening anchor tag like this.

<a href="website-link-goes-here" target="_blank">

The noopener keyword in the rel attribute is added to prevent malicious users from messing with the original web page through the [Window.opener](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener) property. 

<a target="_blank" rel="noopener" href="link-goes-here">

You have to think carefully about when it would be a good time to use the target="_blank" attribute because you don't want to always change the default behavior of links.

I hope you enjoyed this article and best of luck on your programming journey.

]]>