FAQ: Learn HTML - Intro to HTML - Images

This community-built FAQ covers the “Images” exercise in Codecademy’s lessons on HTML.

Here are the most popular community questions on this exercise:

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about HTML in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

This exercize had a hint that said to not forget to add quotation marks around the URL in the src attribute of an img tag. When are quotes and double quotes needed in HTML in general?

1 Like

It was said that both will render correctly, but is it standard practice amongst developers to include or omit the final slash when using self-closing tags?

There is no best practice rule owing to the base case usage, serving up text. When that is the case, which for our purposes is always the case, the HTML 4 rules apply. No slash.

<img src="pic.png">

Where it gets important is when the document markup must not only validate, but must conform to XML specs. That makes the document not a text document, but an XML application. XML concerns itself not with presentation, but with data. Production sites like CC use XML compliant pages under the XHTML doctype. These are complex pages that are sewn together with dozens of pieces of data. We’re not going to be doing that any time soon.

Bottom line, if the exercise doesn’t expect it, don’t write it. That applies to all void elements. HTML 4 rules apply, and are valid HTML5.

1 Like

Okay cool. Thanks for your reply!

1 Like

Just to be clear, self-closing tags is an XHTML term. In HTML 4 the term didn’t exist yet. Even way back then,

<p>some text
<p>some text
<p>some text

would render as three paragraph elements with one line height space between them. Same applies to HTML5. The browser will insert the ENDTAG if it is missing. Do we call these self-closing tags? Well, no, we don’t. They are lazy coder; browser closed tags.

For IMG and INPUT and LINK and META we never had to close them or think about it because they do not have a textContent or innerHTML node. They are meta objects that have attributes and values.

Where the whole self-closing lingo came from was the need for XHTML to conform with XML demands, namely, no tag left unclosed. The cure was a slash at the end and the term, ‘self-closing’ was born. XML was satisfied. IE5.x for the Mac was not being fooled by that hack, and in the din of it all, somebody discovered that a space before the slash would make it work. Problem solved; hack adapted.

One needs to go back two decades to find this discussion, and barring any blatant inaccuracies can be taken at face value. That’s where the space came from. The slash was always the way to appease XML and not have to degrade HTML any more than necessary.

As you can see in the two pics uploaded below, the "[br] tags work just fine, however after running and moving to the next topic I noticed that they were converted to “[/br]” tags. Could anyone please help me with why this is happening, will it also happen when I do this to my notepad file?

These tags are all valid in HTML5:

<br>
<br/>
<br />

The last one is XHTML, with mandatory syntax, B, R, space, slash.

The middle one is HTML5, mandatory only when serving as XML compliant markup.

The first one is the legacy syntax of HTML 4, and all that is needed when serving HMTL as text/html which for most of us is the case.

There may be some merit in learning to use the second form in all our work just to form the habit on the chance that one may learn React.js and JSX rendering markup, which requires that form. This is for down the road. For our purposes it doesn’t matter if we only use <br>.

Are there any advantages in uploading images in one’s own site? Or is it just a waste of space because you can just upload it somewhere else and then insert the link of the image in one’s site?

The advantage would be that you have better control over the images if they are on your own server (or stored in your own hosting account). If you wish to keep images from being indexed by search engines then this would be where to start.

The downside is that your pages may load slower if the images are large files. Most servers only allow two connections at any one time. The more images in the page, the longer the download process will take.

There are ways we can optimize images so they load quickly among which are using fixed sizes to match the width and height attributes and save the files as optimized for the web. A 400 X 300 JPEG can be optimized to as low as 32kb (or lower) at a reasonable quality level (compression) so that they take virtually no time to transfer; or, using a single image comprised of all the images much like a contact sheet a photographer would create. Using CSS the images can be located in the sheet, also known as a sprite.

CDNs (Content Distribution Network) are useful for a couple of reasons…

  • they have several hundred (or thousand) servers, all storing the same content but situated in various high traffic regions of the world;
  • they offer more consecutive connections than the two allowed on the host server so more downloads can take place in background.

Will images be indexed by search engines through reading their alternative text? If so, why not just have the text somewhere else and save storage?

If large images load slower, what about using SVG (vector) images?

Not as a direct result, no. It’s their IMG tag and SRC attribute that the robots crawl for. The alternate text comes into play when the search engine is determining where to insert the image into the index (as in which index to add them to).

Consider,

  • A search robot discovers a link to your site.
  • The robot requests the resource.
  • The robot’s boss, the search server quickly parses the document and creates a list of href and src attribute values.
  • The list above gets compared to the index and rankings of the target sites are recalculated’.

The next step is to continue crawling your site. Search engines know to look for specific pages and folders.

Home
About
Contact
Products
Services
etc.

and,

images
videos
audio
media
etc.

If there are no robot restrictions and those folders are searchable, the SE will add every file to the ‘src’ list that it already has. We can protect folders, but that is for another discussion. Just know that search engines will go anywhere we do not restrict them from going. A web server is a search robot’s playground. Like JS, they are determined to get the job done by whatever means.

What’s the image tag?

<img src="url_to_image_file">

1 Like

3 posts were split to a new topic: Indention in HTML -images

How will I know when to use quotation marks in HTML? When should I use it?

I have a question. Please have a look at the above screen shot. Notice the error message, in red letters, on the bottom of the middle panel. It claims that I made a spelling error when it comes to typing the URL in the exercise. I have NOT made a spelling error when it comes to the URL. Now I can’t move to the next exercise.

And yes, I did use a closing >, it’s just that the error message is blocking the >.

You only have part of the URL in the image tag, here’s the full URL

https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg