Images can be displayed using the img tag.
This tag accepts a src attribute, which we use to set the image source:
<img src="image.png" />
Note that this is a self-closing tag (ends with />), it does not contain any content - it’s self-sustaining.
We can use a wide set of image formats on the Web. The most common ones are PNG, JPEG, GIF, SVG, and more recently WebP.
The HTML standard requires an alt attribute to be present, to describe the image. This is used by screen readers and also by search engine bots:
<img src="dog.png" alt="A picture of a dog" />
You can set the width and height attributes to set the space that the element will take so that the browser can account for it and does not change the layout when it’s fully loaded. It takes a numeric value, expressed in pixels.
<img src="dog.png" alt="A picture of a dog" width="300" height="200" />
Lessons in this unit:
| 0: | Introduction |
| 1: | Your first HTML page |
| 2: | Text tags |
| 3: | Attributes |
| 4: | Links |
| 5: | ▶︎ Images |
| 6: | Lists |
| 7: | Head tags |
| 8: | Container tags |
| 9: | DEMO Using CodePen |
| 10: | DEMO Using VS Code |
Are you intimidated by Git? Can’t figure out
merge vs rebase? Are you afraid of screwing up
something any time you have to do something in
Git? Do you rely on ChatGPT or random people’s
answer on StackOverflow to fix your problems?
Your coworkers are tired of explaining Git to
you all the time? Git is something we all need
to use, but few of us really master it. I
created this course to improve your Git (and
GitHub) knowledge at a radical level. Launching
May 21, 2024. Join the waiting list!