This is part of “An intro to Web” series of posts, with content from the Enki app. If you stumbled upon this, you can start from the beginning.
Image elements display pictures that are stored online. Image elements are unique because they are self-enclosing elements, which means that do not have a separate closing tag and are written as a single tag like this:
The image tag will appear in a webpage like this:
An image element receives its content using the source attribute, written as src. In this case, the image would be found in the same folder as the HTML document:
For images located inside other folders:
For images located on other websites:
By default, an image will display within a webpage at its original height and width, measured in pixels. The image size can be overridden by using the width and height attributes — measured in pixels (although it is common for images to be sized appropriately using height and width in CSS):
Another important attribute is alt, which provides a text description in the browser in case the image doesn’t load properly, as well as helping search engines and screen readers for visually disabled understand the meaning of the image.
A <div> container, which is short for divisions, and <span> containers are important HTML elements used for styling the layouts. <div>s and <span>s alone do absolutely nothing without CSS. They do not have any semantic value as they are simple containers that wrap around content (text, images, etc.) to help control the layout and styling.
A <div> is often used to group larger chunks of content and is often a block element, meaning it has a distinct break before and after it (like paragraphs, headings, etc).
A <span> is often used to group a small chunk of content inside a line of text (such as styling a few key words inside a paragraph).
Check out this code:
Visually, the code above will be rendered this way:
One difference between <div> and <span> elements is that you are able to stack multiple <span>s on the same line without breaking the layout of the page, while trying to stack <div>s will effectively be adding a new line (in the above case, between div and inside).
When using CSS to style <div> and <span> elements, ids and classes are often assigned to them in order to uniquely style them. So, it is common to see them written like this where the <div> has certain styles assigned to it and the <span> changes the style of the text within that paragraph.
Andrei Calabangiu
Content Manager
