Elements, Tags, and Attributes - HTML 5 #1.2

Any recent HTML document will have the following structure:

See the Pen
Sample_HTML
by Harsh Agrawal (@itsharshag)
on CodePen.


You can see we have a series of items in the above text. In an HTML page, we have different pieces of information which are called elements eg. paragraph, heading and list. These elements are added in the HTML file by using tags e.g. <p>&</p>, <h1>&</h1> and <hr>. Tags are used to indicate the start and beginning of an element. The tag used to indicate starting is called the opening tag and the tag used to indicate the end of the element is called the closing tag.

There are some elements that don't need any content inside them. For example, the hr element is a content-less element. It can be represented by just a tag in the form of an opening tag or with a forward slash before the second like angular bracket i.e. <hr> or <hr/>. Both will result in a line being drawn on the webpage.

<h1> and </h1> are tags

<h1>This is a heading</h1> is an HTML element. It consists of the opening tag, closing tag and content (if it is not a content-less tag like hr).

To restate, in an HTML page you specify a series of elements. These elements are represented by their respective tags. These tags may be single or occur in a pair.

Note: It's a common practice by developers and websites to use the terms tag and element interchangeably.

Let's understand the use of each line.

The first line has been used to specify that we want the browser to use the latest standard of HTML i.e. HTML 5. HTML has been there for a long time and has many versions. By specifying this line we are making sure that the browser uses the latest standard.

The second line specifies the HTML element. This element is the root element of our webpage. All elements must go inside their area.

The head element in the third line is used as a container for other elements like meta (convey some facts about the webpage), title, style (used to add an external or internal stylesheet to the webpage) and script (used to add an internal or external javascript code).

On the fourth line, the title element has been used to specify the title of the webpage i.e. the text which will appear on the tab of your browser.

After closing both head and title elements we have the body element's opening tag. Inside the body tags, you will specify every element you want the browser to show to the users like paragraphs, headings, and images.

The heading and paragraph elements have specified the text to be shown on the webpage between their respective opening and closing tags.

After specifying the required elements, <body> and <html> are closed by their respective closing tags.

Attributes

Attributes are parameters for an element that are used to define some additional information about it like background-color, width, and height. Attributes for an element are always specified in the opening tag of the element.

Sometimes the whole purpose of an HTML element depends upon the attribute. For example, the src attribute of the img element is used to include an online or local image to a webpage.

That brings us to the end of this article. By know, you have understood the basic structure of an HTML and have learned about elements, tags, and attributes. In the following articles, you will get to know more about the above HTML elements and many completely new ones.