Don't understand how the footer, id works

HTML-CSS
1

Tell us what’s happening:

Your code so far


<h2>CatPhotoApp</h2>
<main>
  
  <a #href="http://freecatphotoapp.com" >Jump to Bottom</a>
  
  <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
  
  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
  
</main>
  
<footer>"Copyright Cat Photo App</footer>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements

2

Footer explanation:

Perhaps surprisingly, the footer is essentially just a div tag with a fancy name. It acts like a div (as does the header).

Whilst I’m not certain of this, I suspect the reasons for the existence of these uniquely named tags are as follows:

  1. It helps another developer navigate your code, or even helps you navigate your own.
  2. At least in the case of the footer, certain important information is very likely to be contained there - information that might be useful to the likes of search engines. Perhaps their crawlers, or SEO experts, look specifically for these tags.

ID attribute explanation

The id and class attributes should be understood together. Both are a piece of CSS styling that can be used by an HTML tag.

A CSS id looks like this:

#myID {
    background: #333333,
    color: #123456,
    border: solid 1px black
}

An HTML tag uses it like this:

<p id="myID">My paragraph</p>

This paragraph will be styled according to what is written in the CSS (provided you’ve remembered to link that CSS file in the head tag, of course - which is not the same thing as the header tag). In this case, the paragraph will have a black border, a dark grey background, and some red text.

A class looks almost exactly like an id in both the CSS and the HTML. Here’s the CSS:

.myClass {
    background: #333333,
    color: #123456,
    border: solid 1px black
}

And the HTML tags that use this class:

<p class="myClass">Paragraph one</p>
<p class="myClass" id="someID">Paragraph two</p>

Notice that in this case, two tags used that same class attribute. This is because an ID should only be used by one tag, whereas a class can be used as much as you like. The only difference between the two in the CSS, however, is the # for the id, and the . for the class. Finally, notice that I used both a class and an id on that second paragraph. This is because I might want both parapgraphs to have the styles of that class, and then I might want to add a little unique styling to one of them. I could also use multiple classes on an element:

<p class="classOne classTwo redText">My special paragraph</p>

These attributes (id and class) are useful not only for styling your HTML in a clean, organised way, but also handy in CSS frameworks like Bootstrap. One of the many features of Bootstrap is its huge collection of pre-written classes. They’ve done half your styling for you - you just put the right class name into your HTML tag, and it goes from boring black text to the stylish components you’ll find in their documentation.

I hope it makes sense now!

1 Like