1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. Introduction to HTML Elements

Introduction to HTML Elements

Contents

keyboard_tab
HTML Elements
Introduction to HTML Elements
Overview
Difficulty
Beginner
Duration
6m
Students
10
Ratings
5/5
starstarstarstarstar
Description

This practical course explores HTML elements.
 This course gives an introduction to commonly used elements to display content on a web page.

Learning Objectives


  • Learn how to create a generic container element
  • Learn how to place an image on the page
  • Learn how to create a hyperlink
  • Learn how to create lists

Intended Audience


This course is intended for anyone who wants to learn about HTML.

Prerequisites


Anyone with an interest in learning HTML or who wants to improve their knowledge of HTML in general.

Transcript

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.

About the Author
Avatar
Farish Kashefinejad
Full-Stack Development Content Creator
Students
958
Labs
14
Courses
22
Learning Paths
2

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics