New HTML Elements

Images - in order to include images on your website, you need to create an img element, which is a self closing element (no closing tag necessary). Images contain two very important attributes:

src: Like a link requires an href, your image element has to reference a photo that is a file in your website folder, or associated with a url. Here are two examples of how to construct images:

alt: The alt attribute is also required on all img elements. Altertnative text can be useful info for web searches, to render something to the screen if a page is slow loading, and to provide screen readers useful information about an image. To build on the last example:

<img src="cat.jpg" alt="black cat with green eyes" >
<img src="https://boredpanda.com/before-after-cats-growing-up.jpg" alt="long haired black cat as a kitten on the left, to the right the same cat fully grown">

Note: if an image is purely decorative, the attribute should have a null value, and this will cause screen readers to skip the element.

height and width: To control image size, you can set the size of the element using width and height attributes. The default value is pixels, but percentages can also be used.
1. <img src="cat.jpg" alt="black cat with green eyes" width="500" height="600" >
Note:For context, approximately 27.6% of web users have a screen resolution of 1366x768px. And about 95% have a screen resolution of 1024x768px or higher (1280x800, 1280x1024, 1366x768, 1920x1080 or higher). When designing for these variations in screen resolution, it is helpful to target common a common resolution like 1366x768px, or use percentages.

You should be able to get size/proportion information of your image when opening it locally. You can access the dimensions of a picture by activating the applications menu (JAWS is Shift F10) and selecting "get info" on the image menu. Once you have that information, you can use the proportions to calculate a size that you feel fits in with your page. Your paragraph text default size is approximately 16px in most browsers and h1s are approximately 32px. Think about the proportion of your text content to the images you want to use.

Divs - divider elements, or divs allow you to group a set of elements together in one block-level box. For example, you might create a div element to contain all of the elements for the header of your site (the logo and the navigation), or you might create a div element to contain comments from visitors. In a browser, the contents of the div element will start on a new line, but other than this it will make no difference to the presentation of the page. Here's how you construct a div: <div> Some content <div>. Divs are essential to grouping content that we can act on with CSS or Javascript.