HTML's Positive Potential: Empower Your Web Journey|1980

HTML stands for “Hypertext Markup Language.” It’s a standard markup language used to create and structure content on the web. HTML provides a set of elements or tags that define the structure and presentation of a web page’s content, including text, images, links, forms, and more.

What is HTML?

HTML, which stands for HyperText Markup Language, is the standard markup language used to create and design documents on the World Wide Web. It is the foundation of web development and is used to structure content on the internet. HTML consists of a series of elements, each represented by a tag, that define the structure and layout of a web page.

Here are some key points about HTML:

Markup Language: HTML is a markup language, meaning it uses a set of tags to annotate text and define elements within a document. These tags indicate the structure of the content rather than its appearance.
Structure of a Web Page: HTML provides a way to structure content on a web page, including headings, paragraphs, lists, images, links, forms, and more.
Tags: HTML tags are used to define elements on a web page. Tags are enclosed in angle brackets, such as <tag>. Most HTML tags have an opening tag <tag> and a closing tag </tag>. The content is placed between the opening and closing tags.
- Example: <p>This is a paragraph.</p>
Attributes: HTML tags can have attributes that provide additional information about an element. Attributes are added to the opening tag and are usually in name/value pairs.
- Example: <a href="https://www.example.com">Visit Example</a>
Document Structure: An HTML document typically includes a <head> section for meta-information and a <body> section for the content that is displayed on the web page.
- Example: <!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first web page.</p> </body> </html>

HTML works in conjunction with other web technologies such as CSS (Cascading Style Sheets) for styling and layout, and JavaScript for interactivity, to create fully functional and visually appealing websites

HTML is the foundation of the World Wide Web and serves as the backbone for creating web pages. It’s not a programming language; instead, it’s a markup language used to structure and present content in a web browser. When you visit a website, your web browser interprets the HTML code and displays the webpage accordingly.

History of HTML

HTML began its journey in the 1980s with GML (General Markup Language). In 1986s, this language was improved and standardized and was named SGML (Standard General Markup Language). In 1989 Tim Berner Lee and his team modified this language and named it HTML (Hypertext Markup Language). The standard version of HTML came into existence in 1995.

HTML, or Hypertext Markup Language, has evolved over several decades alongside the development of the World Wide Web. Here’s a brief history of HTML:

The early 1990s: HTML 1.0: The origins of HTML can be traced back to the early 1990s when Tim Berners-Lee, the inventor of the World Wide Web, developed a basic markup language to create documents that could be shared and linked together. The first version of HTML, known as HTML 1.0, included basic tags for headings, paragraphs, lists, and hyperlinks.
1993: HTML 2.0: HTML 2.0 was published as a formal specification, introducing new features like tables and images. This version also marked the introduction of browser support for forms and basic interactivity.
1995: HTML 3.0 and 3.2: HTML 3.0 introduced even more advanced features like tables with advanced layout capabilities and support for CSS (Cascading Style Sheets) for styling. HTML 3.2 refined these features and aimed for greater compatibility across various browsers.
Late 1990s: HTML 4.0 and 4.01: HTML 4.0 brought improvements to forms, scripting support, and more advanced layout options. It introduced the concept of frames for dividing a web page into multiple sections. HTML 4.01 was a minor revision, focusing on bug fixes and clarifications.
The early 2000s: XHTML 1.0 and 1.1: XHTML (Extensible Hypertext Markup Language) aimed to bring the syntax of HTML into alignment with XML, making it more compatible with XML-based technologies. XHTML 1.0 and 1.1 followed HTML 4 and focused on stricter markup rules and cleaner code.
2000s: HTML5 Development: HTML5 marked a significant shift in the evolution of HTML. Instead of being developed as a single monolithic specification, HTML5 was developed as a collection of related technologies, including HTML, CSS, and JavaScript. It introduced numerous new elements and attributes to enhance multimedia support, semantics, and interactivity. It also introduced APIs for local storage, geolocation, and more.
2014: HTML5 Becomes a Recommendation: The HTML5 specification reached the “Recommendation” status by the World Wide Web Consortium (W3C), indicating that it was stable and widely adopted as a standard for web development.
Continued Evolution: HTML Living Standard: Instead of releasing new versions, the HTML5 specification transitioned into what is known as the “HTML Living Standard.” This approach focuses on continuous updates and improvements to the existing specification, allowing developers to use new features as they are developed and standardized.
Beyond HTML: Web Components and APIs: In addition to HTML, modern web development also involves the use of Web Components – reusable custom elements – and various APIs (Application Programming Interfaces) that allow web applications to interact with device hardware, sensors, and other functionalities.

HTML continues to evolve to meet the demands of an ever-changing web landscape, emphasizing accessibility, performance, and enhanced user experiences. The standards are set and maintained by organizations like the W3C and WHATWG (Web Hypertext Application Technology Working Group).

Tools used in HTML

We need two basic tools to work with HTML documents:

HTML Editor for creating and saving the document
Browse for viewing the document

HTML editor

An HTML editor is a software tool that allows you to create, edit, and manage HTML documents. HTML editors come in various forms, ranging from simple text editors with basic syntax highlighting to full-featured integrated development environments (IDEs) tailored for web development. Here are a few types of HTML editors:

Text Editors with Syntax Highlighting:
- Notepad (Windows)
- TextEdit (macOS)
- Visual Studio Code (cross-platform)
- Sublime Text (cross-platform)
- Atom (cross-platform)
WYSIWYG Editors (What You See Is What You Get): These editors provide a visual interface that resembles the final output. They allow you to design web pages without directly dealing with the underlying HTML code.
- Adobe Dreamweaver
- Microsoft Expression Web
- BlueGriffon
- KompoZer
Integrated Development Environments (IDEs): These are comprehensive software packages that offer tools not only for HTML editing but also for various aspects of web development, including CSS, JavaScript, and more.
- Visual Studio Code (with appropriate extensions)
- WebStorm
- Brackets
Online HTML Editors: These editors are accessible via a web browser and allow you to edit HTML documents directly within the browser window. They’re useful when you don’t have access to a local HTML editor.
- JSFiddle
- CodePen
- HTML Online Editor

When choosing an HTML editor, consider factors such as your skill level, the features you need, and the overall workflow you’re comfortable with. Basic text editors are suitable for those who prefer working with raw code, while WYSIWYG editors can be helpful for those who want a visual approach to web design. For more advanced web developers, IDEs offer a range of tools for coding, debugging, and managing projects.

WYSIWYG editors

WYSIWYG (What You See Is What You Get) editors are graphical user interfaces that allow you to design and create web pages visually, without needing to write HTML code directly. These editors provide a more intuitive way to build web pages by providing a real-time preview of how the page will appear in a web browser. Here are some popular WYSIWYG editors for creating web pages in HTML:

Adobe Dreamweaver: A professional web design and development tool that offers both WYSIWYG and code-based editing. It supports HTML, CSS, JavaScript, and more.
Microsoft Expression Web: While no longer actively developed, Expression Web is a powerful WYSIWYG editor with features for building modern web designs using HTML and CSS.
BlueGriffon: An open-source WYSIWYG editor that supports HTML5 and CSS3. It offers a clean interface and supports responsive design.
KompoZer: An open-source WYSIWYG editor based on the same technology as Netscape Composer. It’s lightweight and suitable for basic web page creation.
Wix, Weebly, and Squarespace: These are online website builders that offer WYSIWYG editing along with hosting services. They’re geared toward users who want to create websites without technical skills.
WordPress: While primarily known as a content management system, WordPress also offers a WYSIWYG editor in its post and page creation interface. It’s especially popular for blogging and basic website needs.
Content Management Systems (CMS): Many content management systems, like Joomla and Drupal, provide WYSIWYG editors as part of their admin interfaces. These editors allow you to create and manage web content without dealing with code.
Online HTML Editors: There are also online WYSIWYG HTML editors that you can access directly from your web browser. Examples include CKEditor and TinyMCE.

Keep in mind that while WYSIWYG editors are convenient for beginners and those who prefer a visual approach, they might generate more complex or less optimized code compared to hand coding. Additionally, using a WYSIWYG editor may limit your ability to customize your web pages extensively.

If you’re new to web development, a WYSIWYG editor can be a great starting point to create basic web pages without delving into the intricacies of HTML and CSS. As you gain experience and knowledge, you might also want to explore coding HTML and CSS manually to have more control over your designs.

Text editor

In HTML, text editors are not a specific HTML element but rather a term referring to the software tools used to create, edit, and manipulate HTML code. Text editors are essential for writing and managing HTML documents. They provide syntax highlighting, auto-completion, and other features that make coding more efficient. Here are some commonly used text editors for HTML:

Visual Studio Code (VS Code): A free and highly popular source code editor developed by Microsoft. It offers a wide range of extensions that make it suitable for HTML, CSS, JavaScript, and more.
Sublime Text: A fast and lightweight text editor that’s highly customizable and supports various programming languages, including HTML.
Atom: An open-source text editor developed by GitHub. It’s known for its hackability and extensive library of packages for web development.
Notepad++: A Windows-based text editor that offers syntax highlighting and other useful features for coding in HTML and other languages.
Brackets: An open-source code editor developed by Adobe, designed specifically for web development and focused on front-end technologies like HTML, CSS, and JavaScript.
TextMate: A macOS text editor that’s known for its simplicity and powerful features, often favored by developers on Apple platforms.
Nano and Vim: These are terminal-based text editors available on most Unix-like systems. They provide a lightweight environment for coding and are particularly useful for experienced users comfortable with keyboard shortcuts.
Emacs: Another terminal-based text editor with a steep learning curve but incredible customizability and extensibility.

When using a text editor for HTML, you can follow these steps:

Open the text editor.
Create a new file with a .html extension.
Write your HTML code within the file.
Save the file.
Open the file in a web browser to see the rendered web page.

Text editors are an essential tool for web developers, allowing them to efficiently create and manage HTML code, which is the foundation of web pages and applications.

Browser

A web browser is a software application that allows you to access and navigate the World Wide Web. It’s the tool you use to view websites, interact with web-based applications, and consume online content. Web browsers interpret HTML, CSS, and JavaScript code to render web pages in a readable format for users.

Here are some popular web browsers:

Google Chrome: Developed by Google, Chrome is known for its speed, simplicity, and wide range of extensions available through the Chrome Web Store.
Mozilla Firefox: An open-source browser that emphasizes privacy and security. It offers a range of extensions and is known for its customization options.
Microsoft Edge: Developed by Microsoft, Edge is the default browser for Windows 10 and later versions. It’s based on the Chromium open-source project, which also powers Chrome.
Apple Safari: The default browser for macOS and iOS devices. Safari is known for its speed and integration with Apple’s ecosystem.
Opera: Opera offers features like a built-in ad blocker, VPN, and a free browser-based cryptocurrency wallet.
Brave: A privacy-focused browser that blocks ads and trackers by default, offering enhanced security and faster browsing speeds.

Creating Web Page in HTML

Creating a web page using HTML involves writing HTML code to define the structure and content of your page. Here’s a step-by-step guide to creating a simple web page:

Choose a Text Editor or IDE: You’ll need a text editor or integrated development environment (IDE) to write your HTML code. You can use software like Visual Studio Code, Sublime Text, Notepad, or any other text editor of your choice.
Create a New HTML File: Open your text editor and create a new file with an .html extension. This will be your HTML file.
Write the HTML Structure: Start by writing the basic structure of an HTML document:

<!DOCTYPE html> 
<html> 
<head> 
<title>Your Web Page Title</title> 
</head> 
<body> 
<!-- Your content goes here --> 
</body> 
</html>

Add Content: Within the <body> element, you can add various HTML tags to structure your content. For example:

<h1>Welcome to My Web Page</h1>
<p>This is a simple example of an HTML web page.</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Add Images: To add images, use the <img> tag:

<img src="image.jpg" alt="Description of the image">

Create Links: To create links, use the <a> (anchor) tag:

<a href="https://www.example.com">Visit Example Website</a>

Styling with CSS: If you want to style your web page, you can use CSS (Cascading Style Sheets) by linking a CSS file in the <head> section or using inline styles.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Save and View: Save your HTML file. Open it in a web browser to see how your web page looks. Right-click on the HTML file and choose “Open with” to select your preferred browser.
Fine-Tuning: Experiment with different HTML elements, attributes, and styles to achieve the desired layout and appearance.
Upload to a Web Server: To make your web page accessible online, you’ll need to upload it to a web server. Many web hosting services provide tools for uploading your HTML and related files.
Remember that this is a simple example, and as you become more comfortable with HTML, you can explore more advanced features like forms, multimedia embedding, responsive design, and more.

Viewing a Web Page in HTML

To view a web page created using HTML, you need to open the HTML file in a web browser. Here’s how you can do it:

Create an HTML File: First, make sure you have an HTML file that you want to view. You can create this file using a text editor, as explained in previous responses.
Save the HTML File: Save your HTML file with a .html extension. For example, you could name it mypage.html.
Open the HTML File in a Web Browser: Right-click on the HTML file you’ve created, and depending on your operating system and browser, choose one of the following options:
- Open With: Select a web browser (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.) from the list.
- Open in Browser: Some browsers might offer an option to “Open in Browser” when you right-click on the file.
View the Web Page: The web browser will open the HTML file, rendering it as a web page. You’ll see the content and structure you defined using HTML tags.
Interact with the Web Page: If your HTML file includes links, images, forms, or any other interactive elements, you can interact with them as you would on any other web page.

Remember that the HTML file and any related resources (such as images, stylesheets, and JavaScript files) should be located in the same directory or referenced properly using relative paths to ensure everything displays correctly in the browser.

As you make changes to your HTML file, you can simply refresh the browser to see the updated version of your web page. This way, you can iterate and refine your design and content.

Attributes

Attributes are additional information or instructions that you can add to HTML elements to modify their behavior or appearance. Attributes are always specified within the opening tag of an element and are written as name-value pairs. The attribute name and value are separated by an equals sign = and enclosed in double or single quotes.

Here’s the general syntax of an HTML element with attributes:

<elementName attributeName="attributeValue">Content or nested elements</elementName>

Here are some common attributes and their usage:

class Attribute: Used to assign one or more CSS classes to an element, allowing you to apply styles to multiple elements using the same class.
- Example: <p class="highlighted">This is a highlighted paragraph.</p>
id Attribute: Provides a unique identifier for an element, which can be used for styling or JavaScript interactions.
- Example: <div id="header">This is the header section.</div>
href Attribute: Used with an anchor (<a>) elements to specify the URL of the linked resource.
- Example: <a href="https://www.example.com">Visit Example Website</a>
src Attribute: Used with media elements like images (<img>) and audio/video (<audio> and <video>) to specify the source URL of the media file.
- Example: <img src="image.jpg" alt="An image">
alt Attribute: Used with media elements to provide alternative text for accessibility purposes or when the media can’t be displayed.
- Example: <img src="image.jpg" alt="A beautiful landscape">
style Attribute: Allows you to apply inline CSS styles directly to an element.
- Example: <p style="color: blue; font-size: 16px;">This is a styled paragraph.</p>
width and height Attributes: Used with media elements to specify the dimensions of images, videos, or other media.
- Example: <img src="image.jpg" alt="An image" width="300" height="200">
target Attribute: Used with anchor elements (<a>) to specify where the linked resource should be opened (e.g., in a new window or tab).
- Example: <a href="https://www.example.com" target="_blank">Open in a new tab</a>

These are just a few examples of HTML attributes. Different elements have different attributes that serve various purposes, from controlling behavior to enhancing accessibility and providing information to browsers and users. Always refer to the documentation for specific elements to learn more about their available attributes and their usage.

Rules for writing HTML code

Writing clean and well-structured HTML code is important for creating readable, maintainable, and accessible web pages. Here are some rules and best practices to follow when writing HTML code:

Use Lowercase Tags and Attributes: Write all HTML tags and attribute names in lowercase. While browsers are forgiving about casing, using lowercase consistently enhances readability and reduces the chance of errors.
Use Indentation and Formatting: Indent your HTML code properly to show the hierarchy of elements. This improves readability and helps you quickly identify the structure of your page.
Close All Tags: Make sure every opening tag has a corresponding closing tag, or use self-closing tags for empty elements. This ensures your code is well-formed.
Use Double Quotes for Attribute Values: Enclose attribute values in double quotes (" ") rather than single quotes (' '). This is the recommended standard and helps avoid confusion.
Provide Descriptive Comments: Add comments to your code to explain its purpose, structure, and any important information. Comments help other developers (and your future self) understand the code.
Use Semantic HTML: Use HTML elements that best represent the content you’re marking up. Semantic elements like <header>, <nav>, <article>, and <footer> enhance the structure and accessibility of your page.
Avoid Deprecated Elements: Avoid using deprecated HTML elements and attributes. Deprecated features are likely to become obsolete in future versions of HTML.
Choose Descriptive Class and ID Names: Use meaningful class and ID names that describe the purpose of the element. This makes your CSS more understandable and maintainable.
Separate Structure and Presentation: Keep your HTML focused on the structure of the content and use CSS for styling. Avoid inline styles and keep presentation-related attributes to a minimum.
Optimize for Accessibility: Ensure your web page is accessible to users with disabilities. Use proper headings, alt text for images, and other accessibility practices.
Validate Your Code: Use online HTML validators to check your code for errors and warnings. This ensures your code adheres to the HTML specification.
Use Consistent Naming Conventions: Choose a consistent naming convention for your files and directories. This makes it easier to organize and manage your web project.
Test on Different Browsers: Test your web page on different web browsers to ensure it displays consistently across various platforms.
Use External CSS and JavaScript: Whenever possible, use external CSS and JavaScript files instead of inline styles and scripts. This promotes separation of concerns and better code maintainability.
Regularly Review and Refactor: As your project grows, periodically review and refactor your code to ensure it remains clean, efficient, and maintainable.

By following these rules and best practices, you’ll be able to create HTML code that is well-structured, readable, and easier to maintain in the long run.

HTML Document Structure

The basic structure of an HTML document consists of two main sections: the <head> section and the <body> section. These sections play distinct roles in defining the metadata, structure, and content of a web page. Here’s a breakdown of each section:

<head> Section: The <head> section is located within the opening and closing <head> tags at the beginning of your HTML document. It contains metadata and information about the document that isn’t directly visible on the web page. Here are some common elements you might find in the <head> section:
- <title>: Specifies the title of the web page, which appears in the browser’s title bar or tab.<meta>: Provides metadata about the document, such as character encoding, viewport settings, and more.<link>: Links to external resources like stylesheets, icon files, or web fonts.<script>: Embeds or references JavaScript files for adding interactivity to the web page.<style>: Defines inline CSS styles that apply to the entire document.<base>: Sets the base URL for relative URLs within the document.<noscript>: Provides content to be displayed if JavaScript is disabled in the browser.Other elements are specific to search engine optimization (SEO) and social media sharing.
Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

2. <body> Section: The <body> section is located within the opening and closing <body> tags and contains the visible content of the web page that users interact with. This includes text, images, links, forms, videos, and other elements. The <body> section is where you structure your content using various HTML tags to create headings, paragraphs, lists, images, and more.

Example:

<!DOCTYPE html>
<html>
<head>
    <!-- Head section content -->
</head>
<body>
    <header>
        <h1>Welcome to My Web Page</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>About Us</h2>
            <p>We are a team of passionate individuals...</p>
        </section>
        <!-- More content sections -->
    </main>
    <footer>
        <p>&copy; 2023 My Web Page</p>
    </footer>
</body>
</html>

By using the <head> section for metadata and the <body> section for visible content, you create a structured and organized HTML document that browsers can interpret and display correctly for users.

There are two types of Body tag

Block Level element

Text Level element

Block Level element

Block-level elements are HTML elements that create a new block formatting context in a web page. They typically start on a new line and stack vertically from top to bottom. Block-level elements are used to structure the layout of a web page, defining major sections and containers for content. Here are some common block-level elements:

<div> Element: The <div> element is a generic container used to group and style content. It’s often used for layout purposes and as a building block for more complex structures.
<p> Element: The <p> element defines a paragraph of text. It’s used to group and style text content within a block.
<h1> to <h6> Elements: These heading elements define headings of different levels, with <h1> the highest level and <h6> the lowest. Headings are used to structure and organize content hierarchically.
<ul> and <ol> Elements: The <ul> element creates an unordered (bulleted) list, while the <ol> element creates an ordered (numbered) list. The list items are defined with the <li> element.
<li> Element: The <li> element is used to define items within lists created by the <ul> and <ol> elements.
<table> Element: The <table> element defines a table. It’s used to create structured data with rows (<tr>) and cells (<td> or <th>).
<form> Element: The <form> element defines a form that contains various form controls like text inputs, radio buttons, checkboxes, and buttons.
<header> Element: The <header> element represents a container for introductory content, often including headings, logos, and navigation menus.
<footer> Element: The <footer> element represents a container for closing content, typically including copyright information, contact details, and links.
<nav> Element: The <nav> element is used to define a section of navigation links.
<section> Element: The <section> element represents a thematic grouping of content within a document, often corresponding to a standalone section.
<article> Element: The <article> element represents a self-contained composition, such as a news article or a blog post.

Block-level elements are integral to creating the structure of a web page. They help organize content into meaningful sections, define layout regions, and contribute to the overall design and usability of the page.

Text Level element

Text-level elements in HTML are used to apply formatting, styling, and semantic meaning to portions of text within the content of a web page. Unlike block-level elements, text-level elements don’t create new block formatting contexts; they work within the flow of text. Here are some common text-level elements:

<strong> and <b> Elements: Both elements are used to indicate strong importance, but the <strong> element carries semantic meaning, indicating that the content is of strong importance, whereas the <b> element is used for stylistic purposes to make text bold.
<em> and <i> Elements: Similar to <strong> and <b>, the <em> element is used for semantic emphasis, while the <i> element is used for stylistic italicization.
<u> Element: The <u> element underlines text. However, using it solely for styling is discouraged because the underlined text is often associated with hyperlinks.
<s> and <del> Elements: Both elements are used to represent deleted or strikethrough text. The <s> element is often used for styling, while the <del> element carries semantic meaning.
<ins> Element: The <ins> element is used to indicate inserted or underlined text, often to show additions or changes within a document.
<mark> Element: The <mark> element highlights a portion of text for reference or emphasis. It’s often used to indicate relevant or important content.
<sub> and <sup> Elements: The <sub> element defines subscript text (lowered text), while the <sup> element defines superscript text (raised text). These are commonly used for mathematical and chemical formulas.
<abbr> Element: The <abbr> element represents an abbreviation or acronym. You can use the title attribute to provide the full expansion of the abbreviation.
<code> Element: The <code> element is used to represent computer code or programming code within text.
<pre> Element: The <pre> element is used to preserve whitespace and line breaks, often used for displaying code blocks or preformatted text.
<a> Element: The <a> element defines hyperlinks that link to other web pages or resources.

These text-level elements allow you to add semantic meaning, emphasize content, apply styling, and provide context within your text content. Choosing the appropriate element based on its semantic meaning helps improve the accessibility and understandability of your web page for both users and search engines.

HTML Elements

HTML tags are the building blocks of a web page. They define the structure and content of a document by specifying how elements should be displayed in a web browser. Tags are enclosed within angle brackets (< and >) and can have attributes that provide additional information about the element. Here are some common HTML tags:

<html>: Defines the root of an HTML document.
<head>: Contains metadata about the document, such as title, character encoding, and links to external resources.
<title>: Specifies the title of the web page, which appears in the browser’s title bar or tab.
<meta>: Provides metadata about the document, such as character encoding and viewport settings.
<link>: Links to external resources like stylesheets, icon files, or web fonts.
<script>: Embeds or references JavaScript files for adding interactivity to the web page.
<style>: Defines inline CSS styles that apply to the entire document or specific elements.
<body>: Contains the visible content of the web page that users interact with.
<h1> to <h6>: Heading elements used for headings of different levels, from highest (<h1>) to lowest (<h6>).
<p>: Defines a paragraph of text.
<a>: Creates hyperlinks to other web pages or resources.
<img>: Embeds images on a web page.
<ul> and <ol>: Creates unordered (bulleted) and ordered (numbered) lists, respectively.
<li>: Defines list items within <ul> or <ol>.
<table>: Defines a table for structured data.
<tr>: Defines a table row within a <table>.
<th> and <td>: Defines table header and table data cells, respectively.
<form>: Defines a form that contains various form controls.
<input>: Defines input fields within a form.
<textarea>: Defines a multi-line text input field.
<button>: Defines a clickable button within a form or elsewhere.
<div>: A generic container used for grouping and styling content.
<span>: A generic inline container used for styling or scripting.
<footer>, <header>, <nav>: Semantic elements used to define the footer, header, and navigation sections.
<section>, <article>, <aside>: Semantic elements used to define content sections within a document.

These are just a few examples of HTML tags. Each tag serves a specific purpose in structuring and displaying content on a web page. As you become more familiar with HTML, you’ll discover additional tags and their attributes that enhance the functionality and design of your web pages.

Basic HTML Tags List

These are the basic tags used in HTML5.

Tag	Description
<!DOCTYPE>	This tag is the root of the HTML document.
<html>	These tags are a group of heading tags used to create a heading on a webpage.
<head>	This tag defines the head of an HTML document that contains non-visible data like metadata and other information.
<body>	This tag defines the body of a webpage and contains everything that you see on the webpage.
<h1> to <h6>	These tags are a group of heading tags used to create heading on a webpage.
<p>	This tag defines the paragraph in a webpage.
<!–…–>	This tag is used to write comments in HTML documents.
<br>	This tag defines a line break.
<hr>	This tag is used to write comments in HTML documents.

2. Formatting tags

This is a list of formatting tags in HTML5. It gives us the ability to format the text without using CSS.

Tag	Description
<b>	This tag used to define bold text.
<strong>	This tag is used to define important text and add more semantic meaning to the tag.
<i>	This tag is used to define important text and add more semantic meaning to the tag.
<em>	This tag represents stress emphasis on the text same as i tag.
<u>	This tag underlines the text.
<sup>	This tag defines superscripted text.
<sub>	This tag defines subscripted text.
<pre>	This tag defines preformatted text.
<small>	This tag defines smaller text.
<abbr>	This tag defines an abbreviation or an acronym.
<code>	This tag defines a piece of computer code.
<kbd>	This tag is used to display keyboard input.
<del>	This tag is used to display the text that has been removed from the webpage.
<ins>	This tag defines a word that has been inserted into the document. It underlines the word.
<mark>	This tag defines a word that has been inserted into the document. It underlines the word.
<blockquote>	This tag is used for quotation of a text from another source
<s>	This tag defines the text that incorrect
<address>	This tag defines the address or contact of users on a webpage.
<cite>	This tag defines the title of a journal, a book, a poem, etc.
<dfn>	This tag is used to specify a word that is going defined within the content.
<meter>	This tag defines a meter scale with a given range and shows the current value. It is also known as a gauge.
<progress>	This tag represents the progress of work on the webpage.
<q>	This tag creates quotations around the text.
<samp>	This tag is used to define sample output or a computer program.
<template>	This tag is used to hide a block of code when the page loads.
<time>	This tag is used to define a specific time on the webpage.
<var>	This tag is used to define some variable in a computer program or in a mathematical expression.

3. Image tags

The following listed HTML tags list is used for images.

Tag	Description
<img>	This tag defines images on the webpage.
<figure>	This tag defines a self-contained container for images, code snippets, diagrams, etc.
<figcaption>	This tag defines a caption for the <figure>.
<picture>	This tag defines a container to provide multiple resources for an image.
<area>	This tag defines an area inside the image using coordinates.
<map>	This tag defines a map on an image and creates a clickable area.
<canvas>	This tag defines an area to draw something on the webpage using javascript.
<svg>	This tag defines a container for SVG image.

4. Link or navigation tags

These HTML tags are used to create any hyperlinks, define connections with other resources, or create a navigation menu.

Tag	Description
<a>	This tag defines a hyperlink to connect to other webpages.
<link>	This tag defines a hyperlink to connect to other web pages.
<nav>	This tag defines a hyperlink to connect to other web pages.

Following is the HTML tags list for creating ordered, unordered, and description lists in HTML.

Tag	Description
<ol>	This tag defines an unordered list.
<ul>	This tag defines an item in a list.
<li>	This tag defines a description list.
<dl>	This tag defines a description list.
<dt>	This tag defines the name or term in the description list.
<dd>	This tag defines an ordered list.

6. Form and input tags

Following is the HTML tags list for forms and inputs.

Tag	Description
<form>	This tag is used to create a form on a webpage.
<input>	This tag defines input of different types.
<label>	This tag defines input of different types.
<textarea>	This tag defines a group of options in <select> element.
<select>	This tag provides control to select from multiple options.
<optgroup>	This tag defines an item to select within <select> element.
<option>	This tag defines a group of multiple labels and inputs.
<fieldset>	This tag defines a group of multiple labels and inputs.
<legend>	This tag defines a caption for a <fieldset>.
<datalist>	This tag provides control to select among multiple options as well as to submit your own new option.
<button>	This tag defines input of different types.

7. Table tags

Following is the HTML tags list for the table and its components.

Tag	Description
<table>	This tag defines a table.
<thead>	This tag groups the head content of the table.
<tbody>	This tag groups the body content of the table.
<tfoot>	This tag groups the footer content of the table.
<tr>	This tag defines a row in the table.
<th>	This tag defines a header cell in the table.
<td>	This tag defines a cell in the table.
<caption>	This tag defines a caption for the table.
<colgroup>	This tag defines a column group in the table.
<col>	This tag gives property to the column within the <colgroup>.

8. Media tags

Here is the HTML tags list for media elements like audio and video.

Tag	Description
<audio>	This tag is Used to define video content on the webpage.
<video>	This tag defines the text track (subtitle) for the audio and video.
<track>	This tag defines text track (subtitle) for the audio and video.
<source>	This tag is Used to define audio content on the webpage.

9. Meta tags

Following is the HTML tags list for meta tags. These are tags used to store non-visible information about web pages.

Tag	Description
<meta>	This tag defines metadata about the webpage (not visible to users)
<link>	It defines a base URL for all the relative URLs of the webpage

10. Style and programming tags

Following is the HTML tags list style and script.

Tag	Description
<style>	This tag is used to provide CSS for the HTML elements of the document.
<script>	This tag defines javascript program for the webpage.

11. General tags

Here is the HTML tags list for general elements.

Tag	Description
<div>	This tag defines a group of elements within the HTML document.
<span>	This tag defines an inline section within the document.
<header>	This tag defines the header of the webpage or a section.
<main>	This tag defines the main content of the webpage.
<footer>	This tag defines the footer of the webpage or a section.
<article>	This tag defines an article within the document.
<section>	This tag defines the header of the webpage or a section.
<details>	This tag defines a section that users can view or hide.
<summary>	This tag defines a section on the webpage.

See This Also –

7 thoughts on “HTML’s Positive Potential: Empower Your Web Journey|1980 – Present”

AI platform crypto

September 14, 2023 at 10:53 AM

Howdy! I’m at work browsing your blog from my new iphone 3gs!
Just wanted to say I love reading your blog and look forward
to all your posts! Keep up the excellent work!
enterprise seo platforms

September 18, 2023 at 3:40 PM

I was recommended this blog by my cousin. I am not sure whether
this post is written by him as no one else know such detailed about my trouble.
You’re incredible! Thanks!
Movies

September 22, 2023 at 4:52 AM

whoah this weblog is magnificent i like reading your articles.
Stay up the good work! You realize, a lot of individuals are
searching round for this info, you can aid them greatly.
Crypto news

September 24, 2023 at 10:28 PM

Spot on with this write-up, I really think this web site
needs far more attention. I’ll probably be returning to see more, thanks for the advice!
crypto news

September 30, 2023 at 3:52 AM

Your mode of explaining everything in this paragraph is really nice,
every one be able to easily know it, Thanks a lot.
decide future elections

December 11, 2023 at 11:49 AM

Have you ever considered about adding a little bit more than just your articles?
I mean, what you say is fundamental and all. But think of if you
added some great visuals or video clips to give your posts more, “pop”!
Your content is excellent but with pics and video clips, this website could certainly be one
of the very best in its niche. Terrific blog!
- KnowledgeSthali
  
  April 8, 2024 at 5:15 PM
  
  Thanks you for your opinion. We are working in this direction and will also be available soon.

HTML’s Positive Potential: Empower Your Web Journey|1980 – Present

What is HTML?

History of HTML

Tools used in HTML

HTML editor

WYSIWYG editors

Text editor

Browser

Creating Web Page in HTML

Viewing a Web Page in HTML

Tags

Container Element

Empty Element

Attributes

Rules for writing HTML code

HTML Document Structure

Block Level element

Text Level element

HTML Elements

Basic HTML Tags List

2. Formatting tags

3. Image tags

4. Link or navigation tags

6. Form and input tags

7. Table tags

8. Media tags

9. Meta tags

10. Style and programming tags

11. General tags

See This Also –

7 thoughts on “HTML’s Positive Potential: Empower Your Web Journey|1980 – Present”

Leave a Comment Cancel reply

What is HTML?

History of HTML

Tools used in HTML

HTML editor

WYSIWYG editors

Text editor

Browser

Creating Web Page in HTML

Viewing a Web Page in HTML

Tags

Container Element

Empty Element

Attributes

Rules for writing HTML code

HTML Document Structure

Block Level element

Text Level element

HTML Elements

Basic HTML Tags List

2. Formatting tags

3. Image tags

4. Link or navigation tags

5. List tags

6. Form and input tags

7. Table tags

8. Media tags

9. Meta tags

10. Style and programming tags

11. General tags

See This Also –

7 thoughts on “HTML’s Positive Potential: Empower Your Web Journey|1980 – Present”

Leave a Comment Cancel reply