[CLOSED] I am getting red angled brackets and I dont know why

[core-ai-bot]

Issue by brunelstudent
Tuesday Feb 13, 2018 at 20:06 GMT
Originally opened as adobe/brackets#14114

---

I am getting red angled brackets in these lines of HTML5 Code and I dont know why, I narrowed it down to one line of code producing the rest of the red brackets, but I cant see whatis wrong with the line of code. Here is the code I believe to be wrong somehow:

Used when aligning the text, in comparision to the image. Left or right. The image element must be placed between the opening and closing tags of the paragraph element
When Aligning where the first line of text should occur, top, middle or bottom values can be used.

Here is the block of code with red brackets:

Images

		<figure>
		<img src="images/westie.jpg" alt="A dirty West Highland Terrier" title="A dirty West Highland Terrier" height="30%"/>
		<br />
		<figcaption> This is a dirty west highland terrier </figcaption>
		</figure>
		
		<p>To add images the tag 'img' is used. The src attribute is used to identify the location of the image. <br />If the image is located in the same folder then, only the file name is needed, like the <a href="link to a new page.html"> links</a> a ../ is used to go up a directory, <br />
		where as the 'directory name'/ is used to go deeper in to the directories. A File name still needs to be identified. </p>
		
		<p> 
		<u>There are many attributes that come a long with the img element</u>
		<dl>
		<dt> alt </dt> 
		<dd> A description used and displayed when the image is not visable </dd>
		<dt> title </dt> 
		<dd> Used for addition info - Usually displayed when you hover over the image </dd>
		<dt> height and width </dt> 
		<dd> Used when changing the size of the image, can used only height and a percentage to adjust the size using percent </dd>
		<dt> align </dt>
		<dd> Used when aligning the text, in comparision to the image. Left or right. The image element must be placed between the opening and closing tags of the paragraph element<br />When Aligning where the first line of text should occur, top, middle or bottom values can be used.</dd>
		</p>
		
		<p> <dt>figure</dt>
		<dd> figure is used to notify the browser that the caption and image is associated. Surrounding the 'img' and 'figcaption' element. </dd>
		<dt> figcaption </dt>
		<dd> Used to add a caption to images </dd>
		</dl></p>
		</p>

Any help is appriciated

[core-ai-bot]

Comment by RebekahAimee
Sunday Feb 18, 2018 at 06:23 GMT

---

GitHub issues aren't really the place for questions like this, but the friendly folks over at the freeCodeCamp forum are pretty helpful and will respond way faster than you'll get by asking here! Just this once, though, I'll offer some help so you can close this issue.

I plopped your code into Brackets to figure out the problem.

Your element nesting is off. Remember that elements should always be like this:
<p><a href="#">Link Text</a></p>

Your code does this:
<p><dl></p></dl>

You also have two "close paragraph" tags at the end.

This is an easy mistake to make when you're starting out, and the way to avoid making it is to use indentation whenever you nest elements inside each other. Like this:

<div>
    <p>lorem ipsum dolor sit amet
    <br />lorem ipsum dolor sit amet</p>

    <img href="westie.jpg" alt="A dirty West Highland Terrier">

    <p>lorem ipsum dolor sit amet</p>
</div>

Looks like you're still learning. freeCodeCamp has a really good set of resources for that, too.

That's all! Good luck!

[core-ai-bot]

Comment by petetnt
Friday Feb 23, 2018 at 09:11 GMT

---

Thanks for answering@RebekahAimee!

For what it is worth, I am okay with these kinds of support questions on GitHub too as sometimes it is not immediately obvious what the issue is. For example if Brackets would have better shown where the wrong nesting is, there wouldn't be issues like this 👍

Closing as answered, thanks again@RebekahAimee!