Introduction to HTML elements. In this video, I'm gonna discuss some commonly used elements in HTML. The first element I will begin with is div. I'm gonna create inside of the body the opening and closing div tag. Div is short for division, dividing your page into sections. Not to be confused with the semantic element section, even though in the end the purpose is the same. Section just conveys a meaning where div has none. A div is a generic container in HTML for flow content. What is flow content? It is the content that gets placed inside of the body to be displayed on the webpage. Next, I want to display an image on this page. Inside of the div, I will type IMG, short for image. And in order to display an image, I need to use the image elements source attribute, SRC. And the source could be equal to a local follow path or a URL where the image is located at. I'm gonna set the source equal to a placeholder image URL. 

Now with image elements, there is an alt attribute. Now I will type alt and set it equal to dog. The alt attribute is a text description for the image on the webpage. If for some reason the image doesn't load, the alt attribute will show a placeholder text for that image. Also for accessibility, screen readers will use the text to describe the image for the visually impaired. Now I just use dog for demonstration purposes, but in a real world application, the accessibility should be more descriptive, such as dogs sitting at the very top of a staircase. Image is a self-closing tag. So no need to have a closing image element. 

Now, if I wanted to link to other websites or to other pages within this site, I need to use the anchor element. I will begin by typing A short for anchor. And an anchor element has a specific attribute for linking to another page or another site called href, which is short for hypertext reference. And I will set this equal to cloudacademy.com. Now I will close this opening element, and the content that comes afterwards sets the link, and the link can be wrapped around texts, images, or buttons, allowing the user to interact by clicking on the link to visit the link's destination. In this case, I'm gonna use text. Typing Cloud Academy, and now I need to create a closing anchor tag. 

Now I'm gonna create a separation between this content and some additional elements that I wish to place on the page. So I'm gonna create another div. And what I'm gonna do is create a group of related items. And in HTML, the element known for grouping related items is called a list, and there are different types of lists available. I'm gonna begin with a unordered list. I will create the opening and closing tag using UL, and inside of this list, in order for the list to work, I need to use a element that's called a list item. So I will create the opening and closing tag LI, short for list item, and the list item will have a content of list item one. And I will create another list item that will have the content of the list two. 

Taking a closer look, an unordered lists is considered to be a bulleted list indicated by the two discs to the left of the list item content, which is the default style. There is no order given either numerically or alphabetically. To indicate an order, I need to use an ordered list. Back to the left side in the text editor, I'm gonna replace the letter U in the unordered list with the letter O in order to change this to an ordered list. Back at the right site in the output window, the bullets have been replaced with numerical order values of one and two creating an ordered list. Now you're not tied to numerical values. That's just the default. There are other options such as using alphabetical order, A, B, C, and D, and so forth. That's it. Thanks for watching Cloud Academy.