HTML - Lesson 8. Working with images - img tag

Images on web pages can be used in two ways: as a background and as an independent image. It is recommended to use three graphics formats: JPEG, GIF and PNG. All browsers support them; other formats may require special tools.

Typically, all images for a site are stored in a separate folder, for example, images. And the paths to the images are written in the same way as in the links. If you forgot, take a look.

In all subsequent examples, the paths to the images will be written based on the fact that the pictures are in the images folder, and the pages are in the site folder, located at the same level.

Background images

The background image fills the entire space of the element for which it is specified. So, by specifying in the tag attribute background="fon.gif", the fon.gif image will fill the entire browser window.

Sample code: Result

When specifying a document background image, do not forget to also specify the parameter bgcolor. This is due to the fact that the user may have disabled loading images and your beautiful background he won't see. Then the browser will use the parameter bgcolor.

Embedding Images

The tag is used to place images on the page , which has a single required parameter src, which specifies the URL of the image.

Sample code:

img tag Rest of document content

Result:

Rest of document content

Agree, the text next to the picture doesn’t look very nice.

In order for our images to look the way we want, we need to align them. And the parameter will help us with this align.

This parameter has several meanings. Let's look at them all with examples.

Example code with parameter align="left"

img tag with the align="left" parameter The image is on the left, and the text flows around it on the right, and this text can occupy several lines.

Result:

The picture is on the left, and the text flows around it on the right, and this text can take up several lines.

Example code with parameter align="right"

img tag with the align="right" parameter The image is on the right, and the text flows around it on the left, and this text can occupy several lines.

Result:

The picture is on the right, and the text flows around it on the left, and this text can occupy several lines.

Example code with parameter align="top"

img tag with align="top" The top border of the image is aligned to the highest element of the current line. The image seems to be embedded in the line. If the image is large, then the line is expanded to this height.

Result:

The top border of the image is aligned to the tallest element of the current line. The image seems to be embedded in the line. If the image is large, then the line is expanded to this height.

Example code with parameter align="texttop"

img tag with align="texttop" The top border of the image is aligned to the highest text element of the current line (the capital letter of the line).

Result:

The top border of the image is aligned to the highest text element of the current line (the capital letter of the line).

Example code with parameter align="middle"

img tag with align="middle" parameter Aligns the middle of the image to the baseline of the current line.

Result:

Aligns the middle of the image to the baseline of the current line. * large font is made to make the difference between middle and absmiddle clearer

Example code with parameter align="absmiddle"

img tag with align="absmiddle" parameter Aligns the middle of the image to the middle of the current line.

Result:

Aligns the middle of the image to the middle of the current line.

Example code with parameter align="bottom"

img tag with align="bottom" parameter Aligns the bottom border of the image to the baseline of the current line.

Result:

Aligns the bottom border of the image to the baseline of the current line.

Example code with parameter align="absbottom"

img tag with align="absbottom" parameter Aligns the bottom border of the image to the bottom border of the current line.

Result:

Aligns the bottom border of the image to the bottom border of the current line.

If we want the text to be located under the image, then we need to use the tag
with parameter clear, which prohibits flow around. Flow around can be prohibited with right side(right), on the left side (left) and on both sides (all).

Sample code:

Prohibition of image wrapping
Other elements of the document

Result:

Other elements of the document

Image sizes

Any image has a size specified in pixels. When embedding an image on a page, you may need to reduce the size of the original image.

For this purpose the tag there are parameters width- width and height- height. They are specified in pixels or percentages (percentage of screen width)

When you load an image, the browser will automatically scale your image to the specified width and height parameters. Just keep in mind that inaccurate setting of parameters can lead to a change in the proportions of the picture, and consequently to its distortion.

Sample code:

Result:

Separating images from text

You probably noticed that the text sticks very closely to the pictures. It's not always pretty. There are options to solve this problem hspace- horizontal indentation and vspace- vertical indent. Indents are specified in pixels.

Sample code:

The img tag is indented. The rest of the document content is no longer stuck to the image.

Inserting an image

An unpaired tag is used to insert an image into an HTML document , which is placed at the location in the document where the image should be inserted. This tag has a required parameter src, the value of which specifies the path to the desired image in the directory of your site.

For example, to place an image on a page:

The following line is placed in the right place in the document:

This lets the browser know that the site's root directory www.mysite.com there is a subdirectory img 1.png

Here we have specified the full path (or absolute address) to the image. Can you specify relative address Images:

The browser interprets this line as follows: in the directory where this html document is located, there is a subdirectory img, it contains an image with the name 1.png, which should be placed on the page.

Here is an example of specifying a relative image address if your site has a more complex structure and the previous example is not suitable:

The browser interprets this line as follows: a combination of characters ../ means that you need to go up one level from the directory where this html document is located; and then as in the previous example: in the directory where we find ourselves there is a subdirectory img, it contains an image with the name 1.png, which should be placed on the page.

For security reasons, it is preferable to indicate the relative address of the image, except in cases where you place an image located on another site on your page.

Image Dimensions

The size of each image is specified by two parameters: width and height. At the tag There are corresponding parameters: width And height. These parameters take values ​​in pixels (px).

You can set the actual dimensions of the image:

This is not necessary, but it is useful because... slightly speeds up the process of loading a page by the browser (the browser does not have to calculate these values ​​independently). If the image dimensions are immediately specified in the tag parameters , then space on the page will be allocated for this image, and the structure of the page will no longer change when loading - the text will jump, for example.

Or you can enlarge or reduce the image by assigning parameters width And height other meanings. Moreover, if you want to change both parameters proportionally, it is enough to indicate a new value to only one of them, and simply omit the second. The browser will calculate it automatically.

For example, to enlarge our image by 1.5 times, we can write:

or

The result will be the same:

More options width And height can take values ​​in percentages. But! Please note that these are percentages of the browser window size. In this case, you can also specify only one parameter and omit the second.

For example, if we want the image to occupy exactly half of our page in width, we need to write the following:

And we will get:

Frame around the image

At the tag there is one more optional parameter border. Use it to set the thickness of the frame around the image. By default, the image frame thickness is zero, i.e. no frame.

For example, this is how you can add a 3 pixel thick frame to our picture:

This is what the browser will show us:

The border color matches the text color on the page specified using the parameter text tag (See Lesson 6. Page properties - body tag parameters), the default color is black.

And if you don't want to see the frame, force the parameter border null value:

Alternative text

Alternative text is displayed by the browser in place of the image until it is loaded. Or instead of a picture, if for some reason it is not displayed.

When and if the picture is loaded, alternative text will be shown when you hover your mouse over this very picture.

To add alternative text, use the option alt tag , which is assigned a string value, which must be enclosed in quotes.

You can create multi-line alternative text.

To do this, just insert a line break in the HTML document.

text">

Image Alignment

For an image, as for a paragraph, there is the concept of alignment with the text and other images on the page. You can also set the alignment type using the parameter align tag .

Below is a table of possible parameter values align:

Options texttop, top, middle, absmiddle, baseline, bottom set the vertical alignment of the image. And the parameters left And right let the browser know which side the text should be on flow around image.

Padding around the image

To keep the text from wrapping close to the image, you can set padding around the image. You can do this using the parameters hspace(left and right padding) and vspace(spaces at the top and bottom) of the tag .

The following example shows text wrapping around an image, with the image aligned left and with 5 pixels of padding around it:

In the city of Stockholm, on the most ordinary street, in the most ordinary house, lives an ordinary Swedish family named Svanteson. This family consists of a very ordinary dad, a very ordinary mother and three very ordinary children - Bosse, Bethan and Baby.

Here is the result in the browser:

In the city of Stockholm, on the most ordinary street, in the most ordinary house, lives an ordinary Swedish family named Svanteson. This family consists of a very ordinary dad, a very ordinary mother and three very ordinary children - Bosse, Bethan and Baby.

Splitting an image into parts

There are times when you need to place a large image on a page. But then the page will take a long time to load. What to do?

One of the possible The best way out is to cut the image into pieces and place it on the page using a table. To make the image look like a whole, it is necessary to remove the border of the table and all the padding inside and between the cells. Those. assign to the corresponding tag parameters

null values: border="0", cellspacing="0", cellpadding="0".

In the following example, we split the image into 4 parts. This is what the table will look like:

And here is the result:

Hi all!!! In this article you will learn how to insert a picture into an HTML document. It's not difficult at all. But first, I would like to give you some recommendations regarding the images on the web page.

Advice: When you place pictures on a web page, do not get carried away with animated pictures, as this will distract the reader’s attention from the most important thing - the text. It's better to use regular pictures without animation.
Try to use unique images on your web pages. You can read how to make a unique picture, and you can take beautiful pictures.

Let's get started.

How to insert a picture in html?
So, as I said, there is nothing complicated here, add this html code.

kartinka is the name of the picture
jpg is the extension of the image. The extension can be gif, png, bmp.

If the picture is located in the images folder, then the path to the picture will be like this:

images - the name of the folder where the picture "kartinka.jpg" is located.

If the picture is on another site, then the code will be like this:

https://www.site is the site address.

Example :

To do this, simply enclose the image between the link element:

Attributes for images

ALIGN - this attribute is designed to wrap or align the image horizontally.
left - Left aligned, text will flow to the right.
right - Aligned to the right, text flows to the left.

Result :

right alignment

HSPACE - horizontal space from the image (in pixels).
VSPACE - vertical space from the image (in pixels).

Result :

indents from the image

HEIGHT - image height (pixels).
WIDTH - image width (pixels).

Result :

TITLE - This is the title of the picture. The title will be displayed if you hover your mouse over the image.

title=" Hello everyone - site!!!!}">

Result :

picture title

BORDER - this attribute is responsible for the size of the border around the picture. Frames appear in such cases when you make a picture a link. If you set the BORDER attribute to zero, the border will not be displayed.

Result :

And if you change the border value to 5:

Result :

Any picture can be used as a background. To do this, add the background attribute to the body tag.

background="your_background.jpg">

Text can be displayed on a picture background.

Example :

Result :

Picture as background

On this note, I could end the topic “How to insert a picture in HTML,” but I know that many are interested in the question of how to center the picture.
To center the picture, you just need to use this trick:

That's all for sure now. Let's move on to the next lesson.

While traveling on the Internet, you of course see on many sites various pictures, banners, photographs, graphic images. Today we will learn how to insert images into an HTML page.

Adding an image occurs in two stages: first, a graphic file of the required size and format is prepared, and then it is added to the web page via the tag: . The HTML document itself is intended only to display the required image, while without changing it at all.

There are a few things to consider when preparing your images.

1. Since the web page is loaded over the network, a significant factor is size ("weight") of the graphic file, embedded in a web document. The smaller it is, the faster the image will be displayed.

2. Quite often, the physical dimensions of an image (width and height) need to be limited (reduced) by width and height. For example, set the width to no more than 700-800 pixels. Otherwise, the entire image will not fit in the browser window, and scroll bars will appear.

Graphic formats for websites

The two main formats that are most widely used for web graphics are: GIF And JPEG. Such qualities as: multifunctionality, versatility, small volume of source files with sufficient good quality, served these formats good service, effectively defining them as a standard for web images.

There is also a format: PNG, which is also supported by browsers when adding images and comes in two flavors: PNG-8 And PNG-24. However, popularity PNG format much inferior in recognition to GIF and JPEG formats.

Usually, a separate folder is created for images (pictures) in the root directory and all the images for the site are placed in it. Sometimes there are several such folders (if the site structure requires it or it’s easier for you to navigate). This folder is most often called: img or images (Images). In the web page code, write the full path to the graphic file (where the image is located), as well as the name this file(pictures) that you want to insert into the html document.

We write code to insert a picture into a web page

To insert images into an HTML document, use the construction specified in Listing 8.1. This code is inserted into the desired place on the web page (where you want to see the picture).

On our we-page dedicated to cars, I prepared and inserted two images. You can see the embed code for the first image in Listing 8.1.

Listing 8.1.

This is what the first inserted image on the site’s web page will look like:

And now I will comment in more detail on what is written in Listing 8.1.

The image itself is “inserted” using the tag: img src. The full entry looks like this: img src="img/mers1.jpg", Where "img/mers1.jpg"– indicates that our picture is in the folder: img, and the name of the graphic file (picture): mers1.jpg.

In principle, this is already enough to insert an image onto a web page, the remaining parameters are optional, but I still recommend that you always register them, otherwise the picture may be subject to geometric distortions.

Let's look at the additional options:

border="0"– indicates that there is no frame around the image, try changing 0 to another number, for example to 1 , - corresponds to the thickness of the frame around the image in 1 pixel, 2 – corresponds to the thickness of the frame around the image of two pixels, etc.

Important! If you plan to make an image a link, be sure to indicate the value: border="0".

width="400"– indicates that the image width is: 400 pixels(put a real number for the width of your images).

height="209"- indicates that the image height is: 209 pixels(put a real number for the height of your images).

If you do not specify parameters: width And height, then the image may receive geometric distortions.

hspace="20"– indicates a 20 pixel indentation of text around the image.

align="left"– this is a tag already familiar to you….. That’s right, it means left alignment, it can also take the meaning: right- right alignment.

alt="Front view of the car" !}– alternative text is written here, which is displayed when you hover the mouse over the image.

In exactly the same way, we will “insert” the second image onto the web page, with the only difference being that it will be aligned to the right.

Comments on this article (lesson):

Please tell me where exactly should I create the img folder?

The img folder is just a conventional name, you can call it whatever you want, as long as you understand it later. You can create it anywhere, for simplicity, create it in the root directory and put all the images there.

The thing is that the picture is not displayed, only the inscription. What can be wrong? Thank you.

Take a close look at Listing 8.1 above. Take it all to yourself. In the root directory (where all the HTML files of your site are located), make an img folder. Place all your images in this folder. In the listing, change mers1.jpg to the name of your file. Also change the width and height values ​​to the actual dimensions of your file. Good luck.

Thank you very much, everything worked out.

Hello. I have the same situation as the previous speaker: I write the code like yours, I change only the file name: instead of mers.1/jpeg I insert the link Mercedes/jpeg. Only a window appears on the page with the inscription at the top “Front view of the car”, and there is no image. In my opinion, the browser cannot find the path to the photo or it is not written correctly. HERE IS MY CODE: b

Look carefully at your img/mercedes/jpeg code. You understood correctly, the browser does not find the path to the graphic file. 2. The file name is incorrect, see how I have mers1.jpg

Well, I copied the code and pasted it, I have an oval without a picture, in the oval there is a link at the top!

Hello! The problem is the same, I created a folder called img in the same place as the site documents, images with the name 1.jpg are saved in this folder, I write everything as in your example.

If you noticed my picture is in the img folder

A very useful article for beginner webmasters. The only caveat to the "alt" attribute. In relation to the figure, the article gives the following interpretation: "alt="Front view of the car" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

here is my code SO WHY IS THE PICTURE PUT ON THE SIDE WHEN THE TASK FOR IT IS CENTER?

And if I take an image from someone else’s site, will it not be a violation of copyright?

Explain why when laying out HTML document to the server, in place of the images there are empty spaces in the frame. Although before the display, the images were as they should be.

Dmitry, miracles don’t happen, you made a mistake somewhere, check all the paths to the pictures, i.e. how the pictures are written in the code.

This is my code, everything is revealed on the page except the image, I've been trying all day in every possible way but nothing. please tell me what to do

AndreyK, please contact me in my letter. I can’t insert an image in any way, I enter everything correctly but nothing, only the frame and inscription appear

Elvira, I read your letter, as well as all the other comments and letters. But where should I answer... to my grandfather’s village???

I don’t know why everyone is so upset!? You just need to not copy and then paste the codes, but write them yourself and everything will work... here is the text of my picture

I copied your listing, pasted my values ​​- there is a picture. Then I type in the same thing below (manually) there is no picture - what a miracle?

AndreyK please tell me where is the error? No matter how many times I try it doesn’t work((

Andrey, tell me why I can’t see the picture. My code: There is an inscription, but no picture. My address: [email protected] Thank you.

I also suffered for a long time, but it worked! Indeed, the imj folder must be opened in an HTML document.

I'll definitely try it, thank you

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

I also suffered for a long time, it turns out the folder with pictures should be in the same place as index.html, thank you Elena

Andrey I insert:

Andrey I insert: and I don’t have a picture in the document, just an inscription!!! My address: [email protected]

my code...no picture either. The img folder is in the same folder as index... please help. [email protected] Thank you!

Well I do not know. I read all the comments. I tried everything. I copied and pasted my information. Nothing works. The folder with pictures (img) is located in the same place as index.html. But there is no picture. Instead there is a red cross and an inscription. I work in the IE browser. Here's what I entered:

I looked at the HTML code of the page in place of the photo in the lesson: The code on the page is different from what is in the listing. Why? and, by the way, on the page the code “mers1.jpg” is underlined. Copy with underline failed. I tried to insert it like that. Still no picture. What's the matter?

We ask ourselves, we answer ourselves. I suffered for a long time and the picture was not inserted. It turned out: 1, instead of the src tag I had srk 2. I got confused when I was composing the path to the picture. I renamed the folder to IMG and everything worked. I spent almost two days on this, but it was worth it.

Love, but now you will remember this for the rest of your life:) I’m joking, of course, don’t be offended. But seriously, if a person does not leave a return address, then it is almost impossible for me to help him.

Hello, tell me how to place one image on top, the second below on the left, and the third on the bottom on the right))))

..........what is my error of missing image?

Everything in the code is correct, if nothing is messed up, everything should work. But write the name of the file (picture) in English letters. Many servers do not accept the Latin alphabet.

But here’s what’s strange... while I was calling the folder different names, the picture didn’t want to appear, even though the path was written correctly. As soon as I called IMG, she immediately appeared. What's the catch?

Marina, there is no trick or provocation :). In the code of Listing 8.1. it is indicated that this image is in the folder: img. If you change the name of the folder for images on your host, then change it in the listing, that’s the whole trick.

I'm trying to insert an image!!! I write everything down using a notepad, I’m doing everything correctly, maybe it’s not worth using a notepad??

And I open everything in Mozilla Fire Fox latest))

The path of my picture is C:Documents and SettingsdenisDesktopkoffevinogradwwwImg and the picture itself is called gif, also the name includes 1.gif...I do this in notepad

I did it and the full path doesn’t come out, the mozilla doesn’t see the explorer photo and highlights it with a red cross

Denis, rename the Img folder to img, i.e. all in capital letters, and rename the path to it too. Many servers do not display capital case correctly.

I still have the same question: why not images, but only the inscription. I created a separate folder for the site: it contains a Web page and a drawing. Inserted: HELP WHAT IS MY MAIL ERROR: [email protected]

How to make a picture so that it can be enlarged or reduced?

For some reason the picture doesn’t center for me either. What's the catch?.. The code is like this:

We hope that this article will be useful to you. Happy reading!

Images instantly let us understand how interesting a given site or article may be for us, they create a mood, and they can reveal a topic in a new way. Sometimes one photo is worth a thousand words.

But you shouldn’t partake of them if you don’t have Instagram or an online store. It is advisable that the images:

• were informative
• match the color scheme of your site
• were appropriate

If you do not have a suitable photo, you can use the so-called photostock (photobank) - a place where many photographs, illustrations and vector graphics are stored. There are a lot of such resources, you may have even heard about one of the largest - Shutterstock, but downloads there are paid.

For those who do not like to overpay, at the end of the article we have prepared bonus- a list of several photo banks where you can download a huge amount of high-quality beautiful materials absolutely free :)

Image formats

There are mainly 3 types of images used on the World Wide Web:

gif(Graphics Interchange Format - image exchange format)

This is the first format that began to be used on the Internet. The advantages of this format are the availability animations and small size, the page loads quickly. In addition, it supports transparency. Disadvantage - only used 256 colors(that’s actually why the size is small), i.e. it cannot be used for full color images.

jpeg, aka jpg(Joint Photographic Experts Group - Joint Photographic Experts Group - this is the name of the development organization)

suitable for creating full-color, high-quality images, photos. The size of such images is large, so they usually place a large load on the server. If you need to compress a jpeg (for a smaller image weight), we recommend taking the size of the final image multiple of eight , so the loss of quality will be minimal.

png(Portable Network Graphics - Portable Network Graphics. Pronounced the same way as ping, i.e. )

this format was originally developed for the web, i.e. The image usually weighs little and does not slow down the page when loading. This format was created to replace the outdated gif, but unlike it, it does not support animation. Png-8, like gif, uses only 256 colors. Format png-24 supports 16 million colors, although it’s already quite heavy. Png-32 contains the same number of colors as png-24, and plus it allows you to get an image With transparent background , and you can adjust the degree of transparency. When reducing the size of png there is no loss in color quality.

Let's summarize

gif- for animation

jpeg- for photographs

png- for icons, buttons, backgrounds, logos, screenshots, drawings, texts, photographs with a transparent background

Inserting an image into an html file

To add a picture to the page, use tag (from the English image - image, picture). This is a single tag and does not need a closing tag. This tag contains attributes inside.

Attribute src(from the English source - source) indicates the path to the file (the place where the image is located). If the picture is on your computer (the site is still under development) or on your server, use relative link. If the image is from the network, then an absolute link is needed. Read how to do this in the article "Links".

So, to connect an image to your web page, you need to write code like this:

alt attribute(from the English alternative - alternative) indicates the text that the user will see if the image does not load. The path is incorrectly indicated, the picture has been deleted, bad Internet - there can be many reasons, and it is desirable that the person understands what lies behind this hated icon.

Search engines pay close attention to ensuring that this attribute is filled out. And the html validator (a resource for checking code for correctness) will perceive the absence of the alt attribute as an error. If all the attributes will be filled out, and also contain keywords if possible - the visibility of your site will significantly increase, i.e. it will be shown more often in searches. This is from the field of SEO, and at this stage it is enough for us to know that there is such an attribute, and a “live” site must have it filled in. While the site is on our disk, it is quite possible to leave it empty.

In the example below, we deliberately specified a non-existent path for the image so that you can see how the alt attribute works

Height and width of images

You can also set the height and width of the image if the original image is e.g. more than you need.

In HTML5 it is recommended to do this using CSS or style attribute , like this:

In this example, we took 30% of the width, not of the original image, but of the browser window size. When width = 100%, the image opens to the full width of the browser. Remember this feature percent, as units of measurement.

By the way, if we had written only the width, the result would have been the same, try:

You can also set the width and height in pixels. In the case of our panda, whose original dimensions are 1196 x 796 pixels, so that the animal does not suffer when compressed, we need to maintain the proportions, and here you can’t do without a calculator. Let's say we want to reduce the size of the picture by 3 times, then we need to set the dimensions to 399 x 265 pixels.

Please note that if we enlarge the image proportionally, then it is enough to specify only one parameter, for example. width. The smart browser itself will calculate the full size of the image.

Try running this code and look at the result:

Always set the image dimensions. Typically, images take longer to load than the rest of the html code. If the browser knows how much space to reserve for images, it can continue loading the site without waiting for the images to load.

A little mothball

If you happen to tinker with the code of a site created in HTML-4 or even earlier, you will notice that image sizes are set using special width attributes And height. This is a deprecated method, although still valid in HTML5. However, we recommend using style, because The width and height attributes can be affected by internal or external styles that will live in the browser or your CSS file. We'll go into more detail about this when we look at CSS, but for now just look at an example of how styles affect the height and width attributes.

There are 3 tabs in this window: on the first you see the html code, on the 2nd CSS code, and on the last - as always, the result. This works as if the first tab were an index.html file, the second a style.css file, and the third a browser. So, now our CSS says that all elements with the img tag have a width of 100%. The default sizes of the width and height attributes are in pixels, so there is no need to add any units here.

The difference in results is obvious :)

Also in older versions of html the following attributes were used:

align, which was used to align the image horizontally or vertically.

hspace- indentation on the left and right of the image to the surrounding content (for example, text or an adjacent image)

vspace- indentation above and below from the image to the content around it.

border- set the thickness of the frame around the image (by default it is zero)

Nowadays, all this manipulation (and much more) is done using CSS, so we decided not to bother you with it here. If you are still interested in how to work with these attributes, write in the comments, we will add this item :)

Placing an image in the code

From where we place our tag depends on how it will be displayed in the browser.

Example No. 1 - before the paragraph:

Elements such as

AND

refer to block elements . They always start on a new line and occupy the entire available width of the browser window. If you first place , and after it a block element, for example a paragraph, it will be moved to the next line.

Example No. 2 - at the beginning of the paragraph

This is an inline element, it fits inside a block element and does not start a new line. In the example above, the text wraps around the image because the code registered inside

Captions for illustrations

To mark or sign a photo on a page, use tag