7. HTML syntax inconsistencies?


#1


https://www.codecademy.com/en/courses/web-beginner-en-HZA3b/1/2?curriculum_id=50579fb998b470000202dc8b


So I'm made somewhat confused by how html seems to work. Before this lesson the teacher wants us to always close our tags like

or however you want to put it but it has to have a closing tag.

But when in this lesson we start adding more headings it doesn't ask for the closing tag, so me being a cheeky bugger thought that it was a mistake or was purposely leaving it out or something to put the closing tag for the additional headings...and that when I clicked save and continue or whatever it would throw an error or something. Not only does it not throw an error, the code seems to work fine.

Which furthermore confuses me. Why put h1 around the entire webpage's content, and then within use other headings to override that - which is what the teacher has instructed it seems? Is there a purpose to that? Or does putting other h1, 2,3,4 etc in an h1 just change the font size to the average between h1 and whatever h# you're referring to? Or is it a straight override? This had me confused. Anyway, here's my code!


<!DOCTYPE html>
<html>

	<head>
		<title>
			Headings & Paragraphs
		</title>
		
	</head>
	<body>
		
		<h1>
		    <p>Deezenuts</p>

            <h3>
		    <p>Wataredoze</p>
		    <h5>
		    <p></p>
		</h1>
		
		
	</body>
</html>


#2

Some tags are self-closing, <h1> is not one of those.

Before closing a tag, you must make sure that all tags inside it are closed first, it's like matching parentheses, I think you'll agree this isn't how parentheses are used:

([)]

That should instead be:

([])

Browsers are also sometimes too lenient, interpreting things to their best ability even when something could be interpreted multiple different ways. It's a good idea to use a linter/style checker when interpreters are a bit too lenient and won't complain about your mistakes


#3

Or uh, I suppose <h1> might even be optionally self-closing, I can't say either way, that might or might not be something browsers just let slip


#4

Got a more definitive answer now.
https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
Says the end tags may not be omitted.

There's a command-line tool named tidy that cleans up html and displays warnings and errors, for your code it outputs the following warnings:

line 12 column 17 - Warning: missing </h1> before <p>
line 15 column 13 - Warning: missing </h3> before <p>
line 17 column 21 - Warning: missing </h5> before <p>
line 19 column 17 - Warning: discarding unexpected </h1>
line 12 column 17 - Warning: trimming empty <h1>
line 15 column 13 - Warning: trimming empty <h3>
line 17 column 21 - Warning: trimming empty <h5>
line 18 column 21 - Warning: trimming empty <p>

And cleans it up to:

<!DOCTYPE html>
<html>
<head>
  <meta name="generator" content=
  "HTML Tidy for HTML5 for Linux version 5.2.0">
  <title>Headings & Paragraphs</title>
</head>
<body>
  <p>Deezenuts</p>
  <p>Wataredoze</p>
</body>
</html>

That's not how firefox interprets your code, but it's undefined how it should be so..

It also links to an online validator:
https://validator.w3.org/nu/


#5

It's strange because while you say that the end tags may not be omitted either codeacademy or Microsoft edge allows this because my code as I posted worked just fine. Idk tho


#6

Yes. Browsers prefer to guess rather than display an error. If your code is correct then there's less guessing and less oddities as a result.


#7

Okay thanks! Just needed that cleared up.


#10

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