This article concludes the essential HTML elements, but they are not useful alone. Next, you’ll look at how individual elements are combined to form an entire HTML page.
Here we have:
– <! DOCTYPE html> – doctype. In 1992, when HTML was in its infancy, doctype elements were meant to act as links to a set of rules that the HTML page had to follow in order to be considered good HTML code, which could mean automatic error checking and other useful things. In any case, no one cares about them nowadays; these are just a historical artifact that must be included in order for everything to work properly.
– <html> </html> – the <html> element. This element includes all the content on the entire page, and is sometimes known as the root element.
– <head> </head> – the <head> element. This element acts as a container for all the things you want to include in the HTML page, which is not the content you display to your page visitors. It includes things like keywords and a description of the page you want to appear in the search results, CSS to streamline your content, character set statements and more.
– <body> </body> – the <body> element. It contains all the content you want to display to web users when they visit your page, whether it’s text, images, videos, games, audio recordings, or anything else.
– <meta charset = “utf-8”> – this element sets the character set that your document should use UTF-8, which includes most characters in the vast majority of human-written languages. Virtually, it can manipulate any text content you could enter. There is no reason not to set this, and it may help to avoid problems later.
– <title> </title> – the <title> element. It sets the title of your page, which is the title that appears on the browser tab where the page is loaded. It is also used to describe the page when you bookmark it or add it to favorites.
Images
Let us turn our attention to the <img> element again:
As I said before, it frames an image on our page where it appears. This is achieved through the src (source) attribute, which contains the path to our image file.
I also included another attribute (alternatively). In this attribute, a descriptive text is specified for users who cannot see the image, possibly because:
1. They have visual impairments. Users with significant visual impairments often use tools called screen readers to read their other text.
2. Something caused the image not to be displayed. For example, you deliberately try to change the path inside the src attribute to be incorrect. If you save and reload the page, you should see something like this instead of the image: My test image
Keywords for other text are “descriptive text.” The other text you write should give the reader enough important information to get a good idea of what the image is conveying. Try to find a better text for your image.