Tags In HTML: A Guide to Using Tags And Create HTML Webpage

Spread the love

There are many different skills and disciplines involved in the production and maintenance of web design. Different aspects of web design include web graphic design, interface design, custom code and custom software, user experience design, and writing including search engine optimization.

The term design is also used to describe the design process related to the front-end (client said) design of a website, including writing a template on a regular basis. Web designers are expected to be aware of their project and, if it involves creating a map in their own space, they are expected to stay up to date with accessible guidelines.

Table of Contents

Introduction To HTML

HTML stands for Hyper Text Markup Language. An HTML file is a text file containing markup tags. The markup tags tell the web browser how to display the page. An HTML file must have an “htm” or “html” file extension. An HTML file can be created using a simple text editor. The rule-making body of the web is the World Wide Web Consortium (W3C). W3C puts together specifications for web standards. The most essential web standards are HTML, CSS, and XML.

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Your Title Here </title>
</head>
<body>
<h1> This is a heading 1 </h1>
<p> This is a paragraph </p>
</body>
</html>

Tags In HTML

HTML tags are used to mark up HTML elements.
HTML tags are surrounded by the two characters <and>.
The surrounding characters are called angle brackets.
HTML tags normally come in pairs like and .
The first tag in a pair is the start tag, and the second tag is the end tag.
The text between the start and end tags is the element content.
HTML tags are not case sensitive, means the same as .

HTML Tag Code:

<tag>Content</tag>

This text will be rendered like a paragraph.

Tags are represented in two ways.

Start and end tag (paired tags).
An empty tag.

Start and End tag:

An HTML tag looks like this:

<tag> This is some content </tag>

Here <tag> is the start/opening tag and </tag> is the closing/end tag. Both together with the content inside them are called an HTML element.

An Empty tag:

HTML defines certain tags as empty tags, which means they don’t require closing tags and they do not contain any content. Such tags are closed in a start tag only.

For example, there is an element that breaks the line to the next line. When we write:

This is a paragraph

Then it would produce results like:

This is

a paragraph

This means it’s breaking the line and does not require a closing tag , instead, we can close it as in itself. It can be written either or . Both have the same meaning, but writing is a better practice as per the HTML standards.

How to create a web page using HTML

To create and run a web page using HTML, you’ll need a text editor and a web browser. Here’s a basic example to get you started:

Create a New HTML File: Open a text editor (e.g., Notepad, Sublime Text, Visual Studio Code) and create a new file. Save it with an .html extension, such as index.html.

Write Your HTML Code: Add the following code to your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Save Your File: Save the file in the desired location on your computer.
Open Your HTML File in a Web Browser: Right-click on the HTML file you just created and select “Open with” from the context menu. Choose your web browser (e.g., Chrome, Firefox, Edge) to open the file.
View Your HTML Page: The web browser will render your HTML code, and you should see a webpage with the heading “Hello, World!” and a paragraph of text.

Output of above code:

As you can see from the image above, the browser window displays the following text-

Hello, World!

This is a paragraph of text.

And the title of the document is displayed as “My First HTML Document”. The title is shown in the title bar of the browser. The above code has eight basic structure tags-

<HTML>, <HEAD>, <TITLE>, </TITLE>, </HEAD>, <BODY>, </BODY>, </HTML>.

We need to understand these basic structure tags as they are the building blocks of any HTML document. These tags are used in creating HTML documents in the following order-

The document starts with <HTML> tag. This tag declares that the HTML document is being started.
We use the <HEAD> tag to start the head section. The head section contains text and tags that do not appear directly in the main browser window.
The title of the document comes under the head section, which is displayed at the top of the window in the title bar. For writing the title we use the <TITLE> tag and after this tag we write the title of the document.
We use the end tag to close the title. All end tags start with a slash. If we do not end a tag we won’t be able to view our document. To end the title we use </TITLE> tag.
To end the head section we use the </HEAD> tag, which declares that the head section has finished here.
Now we’ll start the body section with the <BODY> tag. The body section contains text and tags that appear directly in the main browser window.
We can write the text of our document and after we finish our text we’ll close the body section with the closing </BODY> tag.
When we end our document we will use the </HTML> tag which shows that the document is finished now.

The above-mentioned tags are nested within each other in a proper order. The <HTML> and </HTML> tags contain the <HEAD> and </HEAD> tags and these head tags in turn contain <TITLE> and </TITLE> tags and in the same fashion, the body of the document is in the body section’s <BODY> and </BODY> tags which are nested within the <HTML> and </HTML> tags.

Tags In HTML: A Guide to Using Tags And Create HTML Webpage

Introduction To HTML

HTML Page Structure