DONATE  
MENU
AJAX
JAVASCRIPT
HTML
JSON

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Introduction » HTML Tags
Share Tweet WhatsApp

HTML Tags

Defining a webpage structure and contents starts with HTML tags. They are a set of predefined names contained in HTML standard markup syntax. A browser thereafter identify and interpret these tags and their contents on a webpage. Syntax To form an HTML tag, we simply start with the less than sign (<), followed by the name of the tag and finally a greater than sign (>).
<tag_name> <!-- rule to forming tags -->
<!-- SOME TAGS -->
<p>
<div>
<span>
<img>
<form>
NOTE:
  • HTML tags are case insensitive meaning they can be written in lowercases, uppercases or even inbetween.
    <IMG>
    <img>
    <iMg>
    It is preferable for your HTML tags to be defined in lowercases but nevertheless, the final baton on that rests with you.
An HTML tag can either be a non - empty tag or an empty tag. A non - empty is a tag that contains some form of contents immediately they are defined in an HTML document and are meant to have some effects or control over such contents. For example,
<h1>Some Content Following
Non - empty tags comprise of an opening / start tag and a closing / end tag. The start tag indicates the beginning of the effect of that tag i.e where its effect should start from and the end tag indicates where it should stop.
<h1> <!-- START OR OPENING TAG -->
Hello World <!-- THE CONTENT -->
</h1> <!-- END OR CLOSING TAG -->
Welcome to my webpage
From the above, we can see an example of a start or opening tag (<h1>), the content inside of the tag (Hello World) and finally, the end or closing tag (</h1>). Since it was closed, the effects of the <h1> tag will not be on the following text or content (Welcome to my webpage) of the webpage. An example
<h1> <!-- START OR OPENING TAG -->
Hello World <!-- THE CONTENT -->
</h1> <!-- END OR CLOSING TAG -->
<p>The above tag was closed so it won't affect me</p>

<h1> <!-- START OR OPENING TAG -->
Hello World <!-- THE CONTENT -->
<p>The above tag was not closed so it will affect me</p>

Copy PRACTICE IT

In simpler words, non - empty tags affect contents following their definition until they are closed. On the other hand, empty tags are those that do not have effect or control over any content following their definition in a webpage and whose effect are not suppose to be on contents.
<br> <!-- This tag have no content, it will only insert a line break -->
empty tags usually do something e.g inserting a line break or a horizontal line after a content or they use their attributes to display something on a webpage like the <img> tag. Since empty tags don't affect contents following their definition, you don't necessarily need to close them but still you can close them using a method called self - closing in which an element is opened and closed in same tag as shown below.

<br/>
<hr/>
<img/>
<!DOCTYPE html>
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<h1>Welcome To My Webpage</h1>
<hr/>
<p>My webpage is my presence online where I share some interesting stuffs and ideas about:<br/>My Self<br/>General Life<br/>Investment<br/>And others.</p>
</body>
</html>

Copy PRACTICE IT

SUMMARY
  1. HTML tags are basically used in defining the structure and contents of a website. For example, using the <img> tag to define an image.
  2. Browsers understand these tags and can therefore interpret your defined <img> tag to a real image.
  3. All tags in HTML are created with first a less than sign(<), followed by the name of the tag and finally a greater than sign (>) e.g <p>, <b>, <table>.
  4. All HTML tags can either be empty or non - empty tags.
  5. Empty tags do not affect other tags or contents declared after them. They basically do something e.g inserting a horizontal line break with the <hr/> tag.
  6. Non - empty have effects that can affect other tags or contents declared after them e.g the <b> tag which makes every other content declared after it bold.
  7. To end the effects of non - empty on other elements, we therefore need to close them e.g the <b> tag effects will stop where it finds its closing tag </b>
Take a short quiz on HTML Tags.
Ask a question or tell us if HTML Tags is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode