gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add title, width, and height attributes (#27249)

Browse Source 
Specify that width and height are usually declared in CSS rather than HTML
This commit is contained in:
carsandparties
2019-01-17 21:04:39 -06:00
committed by Tom
parent ed59804ebd
commit 0876ff6e30
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
guide/english/html/elements/img-tag/index.md
View File

@ -7,17 +7,19 @@ title: Img Tag
A simple HTML Image element can be included in an HTML document like this: A simple HTML Image element can be included in an HTML document like this:
```html ```html
<img src="path/to/image/file" alt="this is a cool picture"> <img src="path/to/image/file" alt="this is a cool picture" title="Some descriptive text goes here">
``` ```
`alt` tags provide alternate text for an image. One use of the `alt` tag is for visually impaired people using a screen reader; they can be read the `alt` tag of the image in order to understand the image's meaning. `alt` tags provide alternate text for an image. One use of the `alt` tag is for visually impaired people using a screen reader; they can be read the `alt` tag of the image in order to understand the image's meaning.
The `title` attribute is optional and will provide additional information about the image. Most browsers display this information in a tooltip when the user hovers over it.
Note that the path to the image file can be either relative or absolute. Also, remember that the `img` element is self-closing, meaning that it does not close with the `<img />` tag and instead closes with just a single `>`. Note that the path to the image file can be either relative or absolute. Also, remember that the `img` element is self-closing, meaning that it does not close with the `<img />` tag and instead closes with just a single `>`.
Example: Example:
```html ```html
<img src="https://example.com/image.png" alt="my picture"> <img src="https://example.com/image.png" alt="my picture" title="This is an example picture">
``` ```
(This is assuming that the html file is at https://example.com/index.html, so it's in the same folder as the image file) (This is assuming that the html file is at https://example.com/index.html, so it's in the same folder as the image file)
@ -25,9 +27,16 @@ Example:
is the same as: is the same as:
```html ```html
<img src="image.png" alt="my picture"> <img src="image.png" alt="my picture" title="This is an example picture">
``` ```
Sometimes an <img> element will also use two other attributes to specify its size, `height` and `width`, as shown below:
```html
<img src="image.png" alt="my picture" width="650" height="400" />
```
The values are specified in pixels, but the size is usually specified in CSS rather than HTML.
#### More Information: #### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article --> <!-- Please add any articles you think might be helpful to read before writing the article -->