I am finding that my students are typing the correct code, but in the wrong places. For example, placing <h1 tags inside the <head tags. The problem is that it is showing correctly on the right hand side. In fact it shows correctly in a regular browser.
Since the code is correctly typed there are no “pink” tags to show up, but it is in the wrong place. I have students that put the navigation bar in the <head tags because it talks about it being like a header. And the code works.
How do you teach them correct coding practices, when the wrong thing works? Students don’t know it is wrong unless it doesn’t work.
Any suggestions on what you do in your classroom are greatly welcomed!! Thanks in advance.
I have experienced this too with my students, however, I’ve found after talking to different teachers in our cohort that different teachers do expect the navigation bar to be in the head while others prefer it to be in the body. With my own students, I feel like a broken record walking around saying, “We all have empty until Lesson 10”, but they still put things in there. It doesn’t really make a difference until they begin working with CSS. I allow students to experiment to see what will work and what will not, but hold them to a very clear rubric of expectations where they lose points if things are in the wrong spots. I will agree though that , headings, and headers are all very confusing for the kids as they get started in HTML for the first time.
It’s been a long time since I actually wrote HTML code, but from what I remember the <head tag was for the title and meta data. If you had <h1 tags or a navigation bar in the <head tag, it shouldn’t show up. Have HTML Coding language rules changed?
Yes, you’re right that the <head> tag should not include anything that’s actually shown on the page. It’s for other information about the page. However, most web browsers are pretty forgiving when it comes to using correct syntax, and they are programmed to do their best to “guess” what the HTML coder meant. Given that, they will show things that are not in the body of the web page.
I think that this is really similar to what other teachers see in their classrooms, like English teachers having to insist on students correcting misplaced modifiers, even though kids think that it’s obvious what they mean. We can also point out that we organize code so that it’s easy for humans to understand, as well as computers.
One of the things I like about teaching programming is that we don’t often need to be the “bad guy” in telling students that they did things incorrectly, but can instead let them figure it out for themselves when their programs don’t run correctly. Still, we have to teach them that just because something works, or works in one situation, doesn’t mean that they have met all the criteria for the project. Sometimes working code isn’t enough, and they need to understand that, too.
That is my biggest concern with the HTML unit is that it does work even though the code is in the wrong place. I know that it will eventually not work, but we don’t get that in-depth with the code so it always works. I understand that code.org doesn’t control what a browser produces, but students don’t fix errors, or what we would call an error if it does work on the page. They look at the right side and if it looks good, then they assume the code is good. Correct code, but in the wrong place doesn’t turn anything ‘pink’.
I think I am going to have mine add a comment in the <head tag that says NOTHING GOES HERE FOR NOW. The we can adjust that when we get to CSS. Maybe code.org will add the one day.
I’ve been thinking about this for years. So many times I walk over to help a student and the code…
The horror! Five body tags, h1 tags in the head, so many things “wrong”
My first line of reasoning is, does it work?
Most times it does and so I can have a discussion with the student about how there are things technically wrong with the page but it still works.
Would they like to know more about the correct structure? Some students are ready for this and others are just happy to have it look like they want and work.
I think that this is why its cool that students will see code in many different situations during the year in CSD. The code in unit 3 has to be syntactically correct and is procedural(for the most part runs from top to bottom) in nature.
The code in unit 4 and 6 also has to be syntactically correct but is event driven.
My two cents. It is always the way its been for me teaching web design. It would be cool to discuss how to help students get to a better place(cleaner code) with their html.
I asked Code.org this same questions several weeks ago. They said the browsers were getting more intuitive and looking for these types of tags and making it work. I like to have the students use their exact code in Windows Notepad and then have them open it in a browser. Chrome did read some of the tags that were in the head tags but most of the tags that weren’t where they belonged were ignored. It was an eye-opener to many of the students. However, many didn’t care as they figured they’d be using a Web design program and not having to worry about actual HTML even when I told them it’s nice to be able to tweek and control your content. That’s the way some “kids” think.
Sometimes HTML code with mistakes in it does work, and it is a bit frustrating. I tell my students to imagine if we were in a rural area where someone only occasionally uses a computer… how updated would their operating system be? How updated would their browser be? Yes, we are high tech, but there are many internet users who are not, and I suspect that this poorly written code might not work on their 10-year-old computer running and an old operating system and outdated browser.
