Confusing students with viewing and use of tags in HTML

Everything shows in the preview no matter where the students put their code. I have students who put their links in the head and yet they still show on the page and work. I have also had students put code such as images or paragraphs outside the body tags and it still shows on their pages. Other web browsers don’t do this. I feel this is confusing them about the use of the body versus the head tags. Does anyone else have this dilemma?

@tanya.campbell

Hi Tanya,

Web Lab’s preview area uses whatever browser it’s opened in to display the code, so if a link would show up in the browser itself, it will show up in the preview area. In general, browsers are often set up to display things that are not strictly correct, if it looks like that’s what the coder probably intended. If you open up Web Lab in one of the browsers that does not display elements outside the body tag, the preview area shouldn’t show them either.

Elizabeth

Tanya,

I had this issue too - If you are on a Mac or PC, you can open up the TextEdit (Mac) or NotePad (PC) and have students copy and paste code, then upon save make sure you add the “.html” and then open in a web browser. It’s a interesting issue but brings up how intelligent computers can be because the computer “knew” what the student intended.

Brad

Hi Brad,

Are you saying that Web Lab is showing things differently than how they are otherwise showing up in the same browser? I don’t think that’s supposed to happen in most cases, so it might be a bug.

Elizabeth

Elizabeth and Tanya,

Sorry for being unclear - when my students experienced the same thing as Tanya’s (they could put code in-between the tags and it would still display) they started asking why they had to focus on the structure (< html>< head>< /head>< body>< /body>< /html>) if it was going to show up anyway (because the browsers were intelligent and knew what they were trying to do). THEN I directed them to check it out in TextEdit/NotePad to show them why the structure was important.

Brad

Unit 2: Lesson 11 emphasizes how CSS interacts with the body element. This is a good time to review the idea of a head tags and body tags. The link between html and css is in the head section and to change the background of the website, the students need to use the body selector.

1 Like

That happens in most browsers. To help students avoid this problem, I have them validate the HTML code by copying and pasting at http://validator.w3.org/ (use Validate by Direct Input Tab) or for CSS https://jigsaw.w3.org/css-validator/ (us Direct Input Tab). This helps students learn that just because the preview “looks” right doesn’t mean the code complies to the W3 Standards.

1 Like