Three beginner mistakes in HTML

When you’re ready for answer, read on.

The culprit in this example is a missing angle bracket.

Where you should have this:<p>So she was considering in her own mind whetherYou instead have something like this:<p So she was considering in her own mind whetherWithout the closing > in the tag <p>, the browser doesn’t know where the tag ends.

Helplessly, it assumes that you mean to create a really long tag, something like <p So she was considering in her own mind whether .

>.

And when text is part of a tag, it’s not part of the page content, so it doesn’t show up in the browser.

Once you recognize this headache, you’ll never fall victim to it again.

2.

The case of the disappearing text IIThe second example suffers from a similar problem.

It’s meant to show two paragraphs of text, with a picture of zebras in between.

But something goes wrong and the second paragraph disappears.

In this case the tag names and angle brackets are fine.

The problem happens in the attributes that specify other details for an element.

In this case, the element that’s at fault it the <img> element that shows the zebra picture.

It has two attributes, a src attribute that points to the image file, and an alt attribute that describes the picture to search engines and screen readers.

But the alt attribute is missing something crucial:<img src="https://cdn.

pixabay.

com/photo/2017/08/22/11/43/zebra-2668655_640.

jpg" alt="A crowd of zebras>The alt attribute doesn’t end properly with a closing pair of quotation marks.

As a result, the browser assumes the rest of the markup is all part of one giant attribute value (or at least until it encounters another " symbol somewhere else in the page).

Once again, it’s easy to find this problem if you start looking where the page goes wonky.

3.

The case of the never-ending formattingThe final example features a similar slip up with a list of humorous definitions.

There’s nothing missing from the page, but somehow the formatting isn’t quite what you expect.

Halfway through the list, the italic formatting switches on for the word “Synonym” and — unexpectedly — stays on for the rest of the page.

If you look at the markup for the “Synonym” definition, things look straightforward enough — at first.

<p><i>Sock:</i> Something put between the foot and shoe.

</p><p><i>Synonym:<i> The word you use instead of the word you can't spell.

</i></p>On closer inspection, you’ll see that the </i> end tag that should turn off italic formatting is actually missing its backlash.

That mistake turns it into another <i> start tag, which means the browser turns on italic formatting again, even though it’s already on.

And now, the italic formatting stays on until the browser hits an extra </i> to turn it off, which it doesn’t.

Now that you’ve got the idea, you can build a more complicated broken page, and challenge an HTML newbie to fix it.

Because — as every seasoned coder knows — you learn more from fixing problems than from getting something right the first time.

.. More details

Leave a Reply