FAQ: Learn HTML – Intro to HTML – Review

This community-built FAQ covers the “Review” exercise in Codecademy’s lessons on HTML.

FAQs on the HTML exercise Review

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about HTML in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

Other Resources

Chelsea mentioned resources in the video attached to this lesson, they are copied below. In future, if you’re interested in resources mentioned in YouTube videos, click the YouTube logo to head to that video and you’ll be able to see links in the description.

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

A post was split to a new topic: What are all the attributes needed?

A few times throughout the video, Chelsea references ‘resources’ regarding this video that we can check out later. For example she said she would include the computerphile video in resources, and also we can check resources for more info on when we should use a div vs. a section element. Where exactly can I find these resources?

5 Likes

I am looking for the same answers as well.

1 Like

Me too! Very confusing…

i am curious .What is the name of the text editor that codecademy uses ?

It’s very likely a licensed product designed for the type of embedding used in the Learning Environment and not something you or I could get our hands on without purchasing a license. Not a helpful answer, I know. A very similar environment is available for online at repl.it. It’s free to register.

Thanks for replying. Youu are kinda right

1 Like

In the lessons and projects I do not see a vertical scroll in part of the webpage, so I do not see all the changes. How can I see the whole page?

The first phase mentioned <span> tags which are a block of tags. I didn’t get a chance to use <span>. Whats the difference between <span>, <p>, and <div> tags?

The greatest difference is between the SPAN and the other two. It is an inline element. The other are block level elements.

We can write a SPAN inside either of the other two, but not the other way around, unless we elevate the inline element to block level. This implies we are fully aware of the new behavior and placement.

The best use of SPAN is to isolate a word or phrase within a sentence so that it can be highlighted or emphasized, and/or given a title attribute so it has a tooltip.

<p>Wishing everyone <span title="Good health" lang="FR" style="text-decoration: underline; font-style: italic">Bonne santé</span>.</p>

We’ll come back to this. Block level elements all demonstrate the same basic qualities…

  • They reach across the entire viewport.
  • They have no height attribute
  • They inherit from their parent(s), the BODY and HTML

P has a special added style:

P {
    margin: 1em 0;
}

That means a P is just a DIV except they render with a blank line between. DIVs don’t have margins.


Now comes a practical exercise for you to perform in the JavaScript Console.

I use Chrome just because it is the one I’m set up for.

Open Chrome

In the location bar, type and entire, about.blank.

Bookmark this page on your Bookmarks Bar as, ‘about.blank’.

Now click the bookmark.

Ctrl + Shift + J gives us the JS console.

Let’s do some stuff at the input prompt, >

 > body = document.querySelector('body')
<-     <body></body>
 > body.appendChild(document.createElement('p'))
<-     <p></p>
 > p = document.querySelector('p')
<-     <p></p>
 > p.innerHTML = "Wishing everyone <span>Bonne santé</span>."
<- "Wishing everyone <span>Bonne santé</span>."
 >  s = document.querySelector('span')
<-      <span>​Bonne santé​</span>​
 > s.style.textDecoration = 'underline'
<- "underline"
 > s.style.fontStyle = 'italic'
<- "italic"
 > s.style.fontWeight = '600'
<- "600"
 > p
<-  >

Click on the arrow to expand the text node of P.

<p>​"Wishing everyone "<span style=​"text-decoration:​ underline;​ font-style:​ italic;​ font-weight:​ 600;​" title=​"Good health">​Bonne santé​</span>​"."</p>​

In one short lesson we have taken control of the DOM. Everything you learn from here on in will in one way or another by tied to this concept of manipulation.

We appended a P element to the document BODY. To that we inserted text and HTML. Then we styled the embedded HTML (SPAN) Finally we added a title attribute to the same element. If we view the source, it looks like it was written by the page author in the raw document (sans quotes).


I forgot to mention, most importantly, watch the browser window in the console as we carry out the above command steps.

Are all these lessons based on HTML5? Thank you!

What we can say with certainty is that the lessons are all HTML. Much of what we use is essentially HTML 4. Given that browsers are staying on top of the emerging recommendations and have a hand in many of them, we can anticipate support for most new iterations of what is a living language.

Indeed, we do see the elements that came into use with HTML5, and there are lot of new elements with the jump from HTML 4. Few of them were any surprise, though since they basically evolved out of what was a regular practice for assigning roles to key segments.

<div id="main" class="main">

became,

<main>

Nothing changes in terms of the makeup of the element’s default style rules. It’s akin to saying,

<div type="main">

Something that has always existed in the HTML API is the ability to create elements. It follows right on the heels of XML. Trouble was that if a browser did not support (permit hooking by style sheet and script) the elements we created, there wasn’t much we could do with them.

HTML5 evolved within the same constraint. Browsers, most particularly Internet Explorer needed to be told that an element existed, and since it could not be told in the HTML, or the CSS, it had to be told in script. Using script to create the element definitions meant they could now be hooked by CSS and DOM script. Thank Remy Sharp for what became a universal implementation that enabled the crossover from HTML 4 to HTML5 during those tricky, spotty support times… html5shiv.js.

We are not likely to see this script in use, these days, though I wouldn’t doubt it is nestled away (in principle) in the core of a few frameworks, to this day.

It’s still a useful tool if we want to create our own elements, also not something to try, just yet. It’s not a requirement of HTML authors to invent elements. It’s a rabbit hole we don’t need to go down. Fun to know it’s there, though, isn’t it?

Vendors toyed with their own ideas for a considerable number of years. They shared their ideas through their own non-partisan working group and each created their own draft version. It’s what made it necessary to use ‘vendor prefixes’ on selectors, and use that vendor’s property declaration. We see it to this day in reams of legacy code either from the period, or still, in most cases, unnecessarily.

W3C had a big hand in all the proceedings, but only led their own group who were charged with examining the outpourings of the vendor group and seeing what could be reasonably and purposefully added to the specifications. It’s why we see the last selector rule always without a vendor prefix. It’s the W3C recommendation, and today, more than ever, vendors are sticking very close to the W3C line. In other words, we can almost depend upon it.

There are sites such as ‘caniuse’ and ‘quirksmode’, et al that may or will have current information on which browsers support which features. Ultimately, that is just a wee bit down the road in terms of where one would spend their time most effectively. Find them, and bookmark them, then back to learning!

1 Like

Thank you for all the info! After moving alonog the lessons I’ve seen many of the HTML elements so I am glad we are learining righth from the most updated version. I am way out of the game of creating my own elements but hey, thank you for the insights into how this transition away from HTML4 came about.

Damian

1 Like

You’re welcome. Don’t lose sight of the fact that HTML5 does not replace HTML 4, only extends it to incorporate more elements. HTML 4 will validate as HTML5 with some small exceptions such as obsolete attributes. Take an HTML 4.1 page and remove the DTD, and replace it with <!DOCTYPE html> then see if it validates at validator.w3.org.

Develop the habit of periodically validating your HTML so you get familiar with the process and make it a commitment to never publish pages that are not validated. Search engines look favorably on pages that validate. As you continue to advance, seek out and test your documents in an outline checker (if one exists). For all we know there may be a tool right in the browser for this purpose.

Bookmark the HTML Elements section of the w3.org site. Keep it handy and study each new element as you learn them. Lastly, MDN is closely associated with W3C and WHATWG and likely the best go-to resource on the web for up to date information on description and usage. It will help you to interpret the specifications (recommendations) as published on the W3 site.

1 Like