Why is there a Syntax error

Glitch Help
1 
<p><div>Big thanks to</div><br>
<div class="blink"><a href="https://online-voice-recorder.com/">
123 Apps </a></div>for the free online voice recorder<br>
<div class="blink"><a href="https://glitch.com/">Glitch</a> </div>for hosting this site free!<br>
As well as <div class="blink"><a href="https://www.addthis.com/">AddThis</a></div>  a customizable share button platform<br>
<div class="blink"><a href="https://fontawesome.com/">FontAwesome</a></div> for the Icons in the Navigation Bar</p>

I don’t understand why there is a syntax error?
Any help would be much appreciated

2

Hi, @ryanherter-me! It appears that the p tags are not paired in your code. You have ended the p tag but have not started it. I hope this helps!

1 Like
3 
yes I have the start and finish <p></p> in my code

I must have missed it when copy paste to the question, any other thoughts on what it could be

I created new project with that code included at https://glitch.com/edit/#!/metal-boiling-fox

4

I do not see the code in the question there. :thinking:

5

its at the bottom of the code line 36-42 I click on format and it says there is an error

6

I now see the error, too. Looks like a Glitch bug. You could mail support@glitch.com or get a support token from glitch.happyfox.com to hear their explanation. But what you could do is, get rid of the p tag; browsers are forgiving they do not care if there is a p tag for showing text. Here is my remix-
https://oxidized-nostalgic-longship.glitch.me/.

7

ok Thank you very much

8

You are most welcome. :slight_smile:

9

Paragraph tags do have significance, they’re good for paragraphs, displaying block text and margins before and after your text, all without CSS.

10

But you could just add styling to your CSS or JS style sheet.

11

Why would you want to use CSS for getting results similar to an element, when already an element exists that has all the default styles without specifying extra CSS?

The p tag also provides a way to reference all text (considering that all text is wrapped within p tags).

Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.

2 Likes
12

Short answer: Div elements are not allowed as children of p elements. An easy solution is to replace your div elements with span elements.

If you are interested of the more technical aspects, it is because of the content model of the p element.
All elements has a content model that describes what type of content can be put into each element. For p elements the content model is phrasing content, however div elements are not categorized as phrasing content and are therefore not allowed.

You may then wonder why your browser can display this code. This is because most modern browser are quite flexible when it comes to wrong HTML syntax. However, it can cause some unforseen problems depending on how you target elements in your css/js.

As an example this:

<p>
    hello
    <div>
        world
    </div>
</p>

Will in most browsers be parsed as this:

<p>
    hello
</p>
<div>
    world
</div>
<p></p>

One of the problems that this can cause, is that selectors like :nth-child(n) or “p div” will select the wrong or no element.

4 Likes