HTML Made Easy:

bk_bharathikannan
8 min readJun 27, 2023

Introduction to HTML

Tim Berners-Lee, a physicist at the CERN research institute in Switzerland invented HTML in 1991. This first version consisted of 18 HTML tages. Now, there are currently about 140 HTML tags, although not all of them are supported by modern browsers.

Tim Berners-Lee
Tim Berners-Lee

What is HTML?

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages

With HTML you can create your own Website.

HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content

HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

HTML is easy to learn — You will enjoy it!

Introduction to HTML: HTML, short for HyperText Markup Language, is the standard markup language used for creating and structuring web pages. It forms the foundation of the World Wide Web, allowing browsers to interpret and display the content of web pages. HTML uses a set of tags and elements to define the structure, format, and presentation of the information contained within a webpage.

HTML is a markup language because it uses tags to mark up different elements and provide instructions to the web browser about how those elements should be displayed. These tags are enclosed in angle brackets (< >) and come in pairs, with an opening tag and a closing tag. The content between the opening and closing tags is affected by the instructions provided by the tags.

Web developers use HTML to create the basic structure of a webpage by defining headings, paragraphs, lists, tables, forms, images, and links. HTML also allows the inclusion of multimedia elements, such as audio and video, and provides support for embedding other web technologies, like CSS (Cascading Style Sheets) for styling and JavaScript for interactivity.

HTML documents are typically saved with a .html or .htm extension and can be created using a simple text editor. Once an HTML document is created, it can be viewed in a web browser, which interprets the HTML code and renders the webpage according to the specified structure and formatting.

In summary, HTML is the language that enables the creation of web pages by defining their structure and content. It plays a crucial role in the development of websites and the presentation of information on the internet.

2) HTML version timeline

The Timline of HTML:

1991- Tim Berners-Lee invents HTML 1.0.

1993- HTML 1.0 is released. Not many developers are creating websites at this time.

1995- HTML 2.0 is published. …

1997- HTML 3.0 was invented. …

1999- The widely-used HTML 4.0 comes out. …

2014- HTML 5.0 is released and used worldwide.

HTML has evolved over time through different versions, each introducing new features and improvements. Here is a timeline of the major HTML versions:

HTML 1.0 (1991):

Tim Berners-Lee invented HTML (HyperText Markup Language) in 1991. HTML 1.0 was the initial version of HTML, which laid the foundation for creating and structuring web pages. It introduced basic elements like headings, paragraphs, lists, and hypertext links. HTML 1.0 provided the building blocks for the World Wide Web and set the stage for the subsequent evolution of HTML and the internet as we know it today..

HTML 1.0 (1993):

This was the first standardized version of HTML. It provided basic elements like headings, paragraphs, lists, and hypertext links.

HTML 2.0 (1995):

HTML 2.0 introduced additional features such as tables, image support, and the ability to specify text colors and alignments.

HTML 3.2 (1997):

HTML 3.2 brought significant advancements to the language. It added support for styling through the use of style sheets, introduced frames for dividing a webpage into multiple sections, and expanded the range of available form elements.

HTML 4.01 (1999):

HTML 4.01 was a widely used version that focused on standardization and improving compatibility across different browsers. It introduced stricter syntax rules, introduced new elements like iframes, and provided support for scripting languages like JavaScript.

XHTML 1.0 (2000):

XHTML stands for Extensible HyperText Markup Language. It combined the syntax of HTML with the strict rules of XML, promoting well-formedness and compatibility with XML tools. XHTML 1.0 emphasized the use of proper nesting and closing of tags.

HTML5 (2014):

HTML5 is the current major version of HTML and represents a significant leap forward in terms of features and capabilities. It introduced semantic elements that describe the structure of a webpage, enhanced multimedia support including native audio and video elements, introduced the canvas element for dynamic graphics, and provided support for offline web applications and geolocation. HTML5 also brought improvements in form handling, drag-and-drop functionality, and better accessibility options.

Essential HTML Tags:

HTML provides a variety of tags that are essential for structuring and formatting web content. Here are some essential HTML tags:

1. `<html>`:

This tag marks the beginning and end of an HTML document and encompasses the entire content of a webpage.

2. `<head>`:

This tag contains metadata about the document, including the page title, character encoding, linked stylesheets, and other important information that is not displayed on the webpage itself.

3. `<body>`:

The `<body>` tag encloses the visible content of a webpage and represents the main content area.

4. `<h1>` to `<h6>`:

These tags define headings of different levels, with `<h1>` representing the highest and `<h6>` the lowest. They are used to structure and organize the content hierarchically.

5. `<p>`:

The `<p>` tag denotes a paragraph and is used to wrap blocks of text.

6. `<a>`:

The `<a>` tag creates hyperlinks and is used to link to other web pages, files, or specific parts of a webpage.

7. `<img>`:

This tag inserts an image into a webpage. It requires an `src` attribute that specifies the image file path.

8. `<ul>` and `<li>`:

The `<ul>` tag defines an unordered list, and the `<li>` tag represents individual list items within the list.

9. `<ol>` and `<li>`:

Similar to unordered lists, the `<ol>` tag creates an ordered (numbered) list, and `<li>` represents list items within the ordered list.

10. `<table>`, `<tr>`, `<th>`, `<td>`:

These tags are used to create tables. `<table>` defines the table itself, `<tr>` defines table rows, `<th>` denotes table headers, and `<td>` represents table data cells.

11. `<div>`:

The `<div>` tag is a generic container that groups and styles related elements. It is commonly used for layout purposes.

12. `<span>`:

Similar to `<div>`, the `<span>` tag is an inline container used to apply styles or group inline elements.

13. `<form>`:

The `<form>` tag is used to create interactive forms that allow user input. It contains input fields, buttons, checkboxes, radio buttons, and more.

14.`<header>`:

The `<header>` tag represents the introductory content or the header section of a webpage. It typically contains the site logo, site title, navigation menu, or other introductory elements.

15. `<nav>`:

The `<nav>` tag is used to define a section of navigation links. It typically contains menus, links to different parts of the website, or navigation elements.

16. `<section>`:

The `<section>` tag defines a standalone section of content within a webpage. It is used to group related content together, such as articles, blog posts, or different sections of a page.

17. `<article>`:

The `<article>` tag is used to mark up a self-contained, independent piece of content that can be distributed or syndicated separately. It is often used for blog posts, news articles, or forum posts.

18. `<footer>`:

The `<footer>` tag represents the footer section of a webpage. It typically contains information about the author, copyright information, contact details, or links to related documents.

19. `<aside>`:

The `<aside>` tag is used to mark up content that is tangentially related to the main content of the webpage. It can be used for sidebars, pull quotes, or supplementary information.

20. `<iframe>`:

The `<iframe>` tag is used to embed another document or webpage within the current HTML document. It is commonly used for embedding videos, maps, or other external content.

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Output For the above code

what purpose is HTML used for?

HTML serves the purpose of creating the structure and presenting the content of web pages on the internet. Here are some key purposes of HTML:

1. Structure:

HTML provides a way to structure web content by using tags and elements. It allows developers to define headings, paragraphs, lists, tables, forms, and other elements that organize and categorize information on a webpage.

2. Content Presentation:

HTML enables the presentation of content in a standardized and consistent manner. It provides tags for formatting text, applying styles, and specifying visual elements such as images, videos, and audio files.

3. Hyperlinking:

HTML includes tags for creating hyperlinks, allowing users to navigate between different web pages, documents, or resources. Hyperlinks facilitate easy access to related content and help connect different parts of the web together.

4. Accessibility:

HTML supports accessibility features, enabling web content to be accessible to individuals with disabilities. Through semantic markup, alt attributes for images, and proper heading structures, HTML ensures that content can be understood by assistive technologies like screen readers.

5. Search Engine Optimization (SEO):

HTML plays a crucial role in optimizing web pages for search engines. By using appropriate tags, structured headings, descriptive metadata, and meaningful content organization, HTML can enhance a webpage’s visibility and search engine rankings.

6. Cross-Platform Compatibility:

HTML is a platform-independent language, meaning it can be interpreted by various web browsers and devices. Web pages written in HTML can be accessed and rendered correctly on different operating systems, browsers, and screen sizes.

7. Integration with Other Technologies:

HTML can be seamlessly integrated with other web technologies. It works in conjunction with CSS (Cascading Style Sheets) to control the visual presentation of web pages, and JavaScript for adding interactivity and dynamic functionality.

Simple Profile Card

SOURCE CODE

Live site URL* ⬇
https://simplecardusinghtmlcss.netlify.app/

Repository URL* ⬇

https://github.com/bharathikannansambasivam/simple-profile-card

For More Information contact me on linked in

https://www.linkedin.com/in/bharathikannan-sambasivam-458509222/

THINK TWICE💭-code once!

THANKS_FOR_READING_!🌟

❤️“Have a Fine_Day”❤️

--

--