HTML Tags, Elements and Attributes.

It is common to find the terms “Tag” and “Element” being used interchangeably by many web developers.  However, technically, an HTML Element is the collection of an opening tag, its attributes, the contents inside the tag and a closing tag. I’ll use the diagram below to demonstrate what this means.

From the illustration above therefore, HTML tags are used to mark the beginning and/or end of a given element.

Attributes are specified in the opening tag and are used to provide more properties to the element. An attribute is given by the name of the attribute and its value in quotation marks as I’ll demonstrate later on in the examples to follow.

Is HTML case sensitive?

A common question you may ask yourself as a beginner is whether HTML tags are case sensitive. The straight answer to this is that HTML tags aren’t case sensitive. However, web developers have decided to keep writing all HTML5 tags in lowercase as a widely accepted convention. 

General Structure of a web page in HTML.

Below is the general layout of a webpage using HTML elements.

Only the content inside the <body> element will be displayed in a web browser. The content inside the <title> element will be shown in the browser’s title bar or in the page’s tab.

Building a Web page using HTML.

I’ll now use the HTML script below as an example to explain in detail some of the common elements and tags that you must know to begin web development.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<h1>Content title</h1>
	<h2>Content subtitle</h2>
	<h3>Section title</h3>
	<h4>Rarely used title tags</h4>
	<h5>Rarely used title tags</h5>
	<h6>Rarely used title tags</h6>

	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum fusce ut placerat orci. Eu consequat ac felis donec et odio pellentesque diam. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Elit ut aliquam purus sit amet luctus venenatis.</p> 
        <!-- This is how to comment out stuff -->
		<p>Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Integer vitae justo eget magna <br>
		fermentum iaculis eu non diam. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Interdum velit euismod in pellentesque massa placerat duis. Massa vitae tortor condimentum lacinia quis vel eros.</p>

		<hr>

		<p>Nunc scelerisque viverra mauris in aliquam sem. Scelerisque in dictum non consectetur a. <b>Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet.</b> Congue eu consequat ac felis donec et odio pellentesque diam. Sagittis vitae et leo duis ut. Enim lobortis scelerisque fermentum dui faucibus in. <i>Viverra suspendisse potenti nullam ac tortor.</i> Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. <u>Dui accumsan sit amet nulla facilisi morbi tempus iaculis.</u> Id diam maecenas ultricies mi eget mauris. </p>

		<p>
		Lorem ipsum dolor sit amet, <a href="" target="_blank">web development tutorials</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum fusce ut placerat orci. Eu consequat ac felis donec et odio pellentesque diam. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Elit ut aliquam purus sit amet luctus venenatis.</p> 

		<h2>And now the images</h2>
		<p>Dictum fusce ut placerat orci. Eu consequat ac felis donec et odio pellentesque diam. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Elit ut aliquam purus sit amet luctus venenatis.</p>
		<img src="https://via.placeholder.com/728x90.png">
		<p>Dictum fusce ut placerat orci. Eu consequat ac felis donec et odio pellentesque diam. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Elit ut aliquam purus sit amet luctus venenatis.</p>
		<img src="banner.png" border="2">

		<h3>Somethimg about lists</h3>
		<ol>
			<li>Fruits
                <ul>
             	  <li>Apples</li>
             	  <li>Oranges</li>
             	  <li>Manngoes</li>
                </ul>
			</li>
			<li>Vegetables</li>
			<li>Grains</li>
		</ol>

		<h2>Tables are fun</h2>
		<table border="2" cellpadding="10" cellspacing="0">
			<tr>
				<th>Month</th>
				<th>Rent</th>
				<th>Utilites</th>
				<th>Groceries</th>
				<th>Entertainment</th>
			</tr>
			<tr>
				<td>August</td>
				<td>$1500</td>
				<td>$350</td>
				<td>$200</td>
				<td>$50</td>
			</tr>
		</table>

</body>
</html>

You can copy this script to your text editor and save it as “index.html”. Then open the file using any web browser to see the outcome.  

What is lorem Ipsum?

Lorem Ipsum is dummy text used during the web development and design phase that is used as a placeholder for actual text. This helps web developers and designers or clients to focus on the website layout without being distracted by writings.

From the HTML code example given above you observe the of dummy text I have used to fill up the paragraphs in my website. You can get this text easily using a Lorem Ipsum generator.

Main HTML elements.

  • <!DOCTYPE html> tells the browser that this is HTML5 document. There are no closing tags since it doesn’t surround any text.
  • <html>…</html> this tells the browser that anything inside these tags is HTML code.
  • <head>…</head> contains information about the website and is also where the CSS and Javascript files are loaded.
  • <body>…</body> main content seen on the webpage goes inside these tags.
  • <title>…</title> sets the title of the webpage. If a website has different pages, each page can have its own title. The title appears in the browser top tab.

<meta charset = “utf-8”> Unicode for translating the human language to machine readable format.

<meta name = “viewport” content = “width=device-width, initial-scale = 1”> important for responsive websites so that webpages can properly display on different devices.

  • width property makes the width of the website the same as that of the device it is being viewed
  • initial-scale property sets the zoom of the website

Adding comments to HTML code

To comment out in HTML, insert information between <!–  –> tags (browsers won’t show these notes).

any content placed with-in <!– … –> tags will be treated as comment and will be completely ignored by the browser.

Commenting in HTML allows developers to leave notes about their code, its functionality or to indicate necessary changes for the future.

You can comment multiple lines by the special beginning tag <!– and ending tag –> placed before the first line and end of the last line

HTML elements in the body of the web page.

Most body tags are based on the common structure of word documents. The tags enable us to create headlines, paragraphs, lists, tables and many more features as we are going to discuss below;

With the development of CSS, some of the body tags are no longer used as much as they used to be especially in the styling of webpages. Therefore, we are mainly going to focus on the HTML tags that are commonly used in most websites today.

Header element (<h>…</h>)

These are designated with letter “h” with numbers from 1 to 6.

The h1 tag is the highest in priority and mostly used for the main title of the content on the webpage.

h2 tags are used for subtitles and h3 tags are also commonly used for section titles.

There are also h4,h5 and h6 tags although these are rarely used.

As observed from the sample HTML code for the website created, these tags vary in font size according to priority with h1 having the highest priority.

Paragraph element (<p>…</p>)

These tags are used to separate content into blocks. In the example website, I have used some place holder text called “Lorem Ipsum” to demonstrate how these paragraph tags work.

NOTE: HTML does not support automatic line breaks or spaces in content. This is achieved using specific tags

Line break element <br> : These don’t have a closing tag since they don’t surround text. Such tags without closing tags are called “void elements” since they surround no content.

Styling elements

These contain tags that are used for changing the appearance of text and include;

Horizontal rule element <hr>

This adds a horizontal line across the entire page and does not have a closing tag.

Link element <a> …</a>

These are “anchor” tags used for linking to content from another location. Link tags contain these attributes;

The structure of the link element is <a href = ”…” target = ”_blank”>…</a>

By default, if you have not visited the link before it will appear blue and if the link has been visited before it appears purple.

Image element <img>

This needs the “scr” attribute which represents the source of the image. For this example, I have used the URL of an image place holder from placeholder.com.

<img scr = “https://via.placeholder.com/780×90”>

Also, the source can be the location of the image file for example <img scr = “banner.png”>

In this case the image should be in the same folder as our HTML document therefore we just state the name of the image as the source.

The image tag also has a “border” attribute which wraps a border around the image. However, the border property is now mostly achieved using CSS.

List elements

Unordered list <ul>…</ul>

These are used to list items with bullet points. Each item inside the list is surrounded by list tags <li>…</li.

Ordered list <ol>…</ol>

This lists the items labeled with numbers

Lists can also be nested inside one another by creating a new list tag inside the list item in question like illustrated in the diagram below.

NOTE: When nesting elements it’s good practice to indent the child elements. This helps to keep the code clean and easy to follow up.

Table element <table>…</table>

These enable data to be displayed in rows and columns. The table element contains other nested elements and these are;

  • <tr> – table row
  • <th> – table header
  • <td> – table data

The diagram below shows how the HTML table elements are arranged and the appearance of the table on the web page. 

The table element also has a number of attributes like border, cellpadding, cellspacing as shown in the example given above which are used to improve on the appearance of the table. However currently most of the styling for tables is done using CSS.

Tables are widely used in web development and therefore have a number of properties that you will be learning as yo progress. Since this is a beginner tutorial, I only wanted to show the basic structure of a table in HTML.

Difference between HTML Block and In-line elements.

From the example HTML script and explanations of the various tags above, you can observe that not all the tags and elements are displayed the same way. This is because HTML displays content either as block or in-line.

A block-level element always takes up the full width available on the webpage therefore every block element starts on a new line. Some of the block-level elements used in the sample HTML code include <p>, <li>, <ul>, <ol>, <h1>to<h6>, <table>, <div>

An inline element only takes up as much width as necessary and does not start on a new line. Examples of inline elements include; <a>, <br>, <img>, <strong>, <i>, <span>

A block element can contain inline elements but an inline element cannot contain a block-level element!

Container elements.

These elements are used to wrap other HTML elements forming a block of elements. This is important especially when we begin using CSS to style our webpages because we can easily control the style of elements inside the container by simply targeting the container element instead of each of the individual elements.

<div> element

This is used as a container for other HTML elements. It has no required attributes although if used with CSS, the style, class and id attributes are commonly used to style blocks of content.

 <span> Element

This is an inline container used to mark up a part of a text, or a part of a document and like the <div> element, it can also be used together with CSS to style parts of text.