Indentation? in Learn HTML and CSS Part I


#1


This is the link to the exercise


I don't know whether I am not following correct practice. I tried to make it look nice but then it said not to use the TAB button unless your text editor had been configured properly. The exercise also said that there was a mistake somewhere in the code, but I wonder if that was just if I hadn't just messed with the formatting, because it's pretty laissez-faire about what's an acceptable answer. At one point I ran "a href" for creating a link (with tags) and it said I was right.

It also says use two spaces for indentation, but I'm confused. So -ul- gets one space -li- gets two? Does it get two more with more nesting?? Or just one?


<!DOCTYPE html>
<html>
<head>
  <title>Animals Around the World</title>
</head>
<body>
  <h1>The Brown Bear</h1>
  <p>The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
	<a href="https://en.wikipedia.org/wiki/Brown_Bear" target="_blank">Learn More.</a>
	<p>The following are subspecies of bears:</p>
 <ul>
   <li>Arctos</li>
   <li>Collarus</li>
   <li>Horribilis</li>
   <li>Nelsoni (extinct)</li>
 </ul>
	<p>The following countries have the largest populations<br /> of brown bears:
	</p>
 <ol>
	<li>Russia</li>
	<li>United States</li>		
    <li>Canada</li>
</ol>
	<a href="https://www.en.wikipedia.org/wiki/Brown_bear" target="_blank">
   <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt="An image of a Brown Bear" />
  </a>
</body> 
</html>


I imagine there being a couple mistakes, unless they fixed it up in the exercise but....can I get some clearer formatting instructions and have someone confirm whether the code above is sloppy in readability?


#2

To put it simply:
Children, they're the tags inside other tags, get indented one tab (outside Codecademy)/2 spaces in each time, for readability, like so;

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
    </head>
    <body>

    </body>
</html>

head and body are direct children of html, which is their parent. Think of them as siblings to eachother. title is a child of head, and DOCTYPE is just the declaration of the document type - HTML - so you don't need to worry about that too much. It's always above, but not differently indented than, the html tag, and it's a sibling to html and neither parent nor child to anything.

Questions? :stuck_out_tongue:


#3

In HTML the indentation is purely for readability so we can visually determine the nesting of elements.

<parent>
  <directchild>
     <descendant>

     </descendant>
  </directchild>
</parent>

The browser completely ignores white space around elements, which is why we say it is for readability that we compose this way.

The new style guides recommend two spaces only for HTML indentation, which is also what the instructions state. We should not confuse learners by contradicting what they have just been told.

The doctype is outside of the document so not an actual element, hence the !. It points to the document root, <html>. It is not a sibling to anything.


#4

That makes sense, thank you :slight_smile:
How do people indent things like inserted pictures that are links ? I've seen some inconsistancy with that.

sometimes people, including codeacademy tutorials, will do

<a href="www.google.com"><img src="really-really-long-img-source-like-super-long-where-it-ends-up-taking-two-or-three-lines-with-word-wrap.png"></a>

But according to instructions it should be like

<a href="www.google.com">
  <img src=really-really-long-img-source-like-super-long-where-it-ends-up-taking-two-or-three-lines-with-word-wrap.png.png">
</a>

Are these exceptions to the indenting guidelines??


#5

https://google.github.io/styleguide/htmlcssguide.xml


#6

Thanks for the guide but that doesn't answer my specific question.....I understand these are guidelines, I guess I wanted to know what best practice was for that scenario as a clue, and also just to know how to 'format' or indent for hyperlinked images specifically. How do you do it?


#7

Indent it how you like. Guidelines are guidelines only. If you're the only one who needs to read the code, do it how you can read it. I'd do;

<a...>
    <img....>
</a>

#8

Since white space is ignored by the browser, it has no bearing on the parsing of the document. We only use indentation to indicate nesting of elements.

The example above may be indented as such so the URL's are easier to read. Consider that <a></a> and <img> are both inline elements. A really anal author such as myself will have one's own style guide. My rule for inline elements is to always give them a block level container, such as a <p></p>. This is the element that would be indented to indicate nesting and make the parent easy to spot.

<div>
  <p><a href="#"><img src="#"></a></p>
</div>

This is my own style rule, not based on any specific requirement, as we know there is none from the perspective of the browser.

The bottom line is that it is up to the individual to chose a manner of composition. The coding community has been growing for decades and style guides are especially important when collaborating with ohers. The adopted styles of the community are not unreasonable and generally help to give structure and meaning to a document. It is still, nonetheless, subjective, not objective.


#9

Ok, that makes sense (both of you).

Ahhh it's subjective aiieeee, jk, that's practical, especially for working
with different organizations or groups. I suppose that's kinda cool too.

Thank you very much for your patience and for answering my questions. I
appreciate it.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.