HTML Lesson 1: Elements

3
80

What is an HTML Element?

An HTML element is an individual component of an HTML document or web page that includes a start tag and an end tag. When you view a website, everything you see in front of you — the images, the paragraph texts, the navigation links — all these are elements of the web page. Each element can have HTML attributes specified. Elements can also have content, including text!

An HTML tag is composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket to distinguish it from the start tag. For example, a paragraph, which is represented by the p element, would be written as

<p></p>

Void Elements

However, not every element requires the end tag, or even the start tag, to be present. Some elements, which are sometimes referred to as the void elements, do not have an end tag. A good example of this is the br element, which represents a significant line break, such as in a poem or an address. A void element’s behavior is predefined, and it can not contain any content or other elements. Here’s an example of the br element in action.

Source Code

[html]

<p>John Doe<br />
123 Del Ray Rd<br />

Lantana, FL 12345</p>

Output

John Doe
123 Del Ray Rd
Lantana, FL 12345

Core Elements of a Webpage

Each webpage contains at least three core elements. They are the <html> element, the <head> element, and the <body> element. Let’s go into detail on what these tags mean.

HTML Element

This essentially is the webpage. All the HTML code used to create the website is located between the <html> opening and ending tags. All web pages must begin with the <html> tag. The </html> tag isn’t require per say, but it is important to remember that in order to conform to good web design practices as well as HTML standards, you need to include the closing tag!

HEAD Element

This area of the web page is used to define META information. In a nut shell, this place is for data to define data. Sounds crazy right? Well here’s an example: In this area you can define the title of the web page. The title doesn’t appear anywhere in the content, but the title is what shows up in one of your browser tabs! Don’t worry about it too much, we’ll discuss it more later.

Body Element

Here it is; the meat and potatoes of the web page. Mmmm! This is where we will be doing all the content design of the website.

Summary

  • An HTML Element
    • Can have HTML attributes
    • Includes a start tag and an end tag
  • Void Elements do not have an end tag

Next Lesson

Now that we have a foundation to build off of, let’s check out some basic HTML Elements in action during our Headings lesson.

3 COMMENTS

  1. […] the HTML Elements with CSS selector. In fact this is way to target the HTML Element. However, it is quite easy […]

  2. […] HTML Elements which appears in a line without any line spacing, is known as the Inline Element. For example, <b>, <a> and <img> are Inline Elements. In CSS you can convert the block elements into inline elements using the display property. Here’s the demonstration of it: […]

Leave a Reply