Introduction to HTML
HTML (Hypertext Markup Language) is the standard markup language for creating web pages and web applications. It is a fundamental technology used for creating websites and is supported by all web browsers. HTML allows developers to structure content on the web, such as text, images, videos, and forms, in a way that can be easily understood and displayed by web browsers.
HTML documents are created using tags, which define the structure and content of the web page. Tags are enclosed in angled brackets, and there are two types of tags: opening and closing tags. Opening tags are used to indicate the start of a tag, while closing tags indicate the end of a tag. The content of the tag is placed between the opening and closing tags.
Here are some of the major points about HTML:
- HTML stands for HyperText Markup Language: HTML is a markup language used to create web pages and web applications. It is designed to provide structure and semantic meaning to the content of a web page. HTML uses a series of tags and attributes to define the structure and content of a web page.
- HTML is used to create web pages and web applications: HTML is the primary language used to create web pages and web applications. It provides a basic structure for web pages and is used in conjunction with other web technologies such as CSS and JavaScript to create visually appealing and interactive web pages.
- HTML is a widely used language on the web: HTML is one of the most widely used languages on the web. Almost all websites and web applications use HTML to define the structure and content of web pages. HTML is supported by all modern web browsers and is an essential tool for creating websites.
- We can create a static website by HTML only: HTML can be used to create a simple static website with basic content and functionality. A static website consists of HTML files that are served to the user as-is, without any dynamic content or server-side processing.
- Technically, HTML is a Markup language rather than a programming language: HTML is technically a markup language, not a programming language. Unlike programming languages, HTML is used to define the structure and content of a web page rather than to perform computations or execute algorithms. However, HTML can be used in conjunction with other web technologies such as CSS and JavaScript to create dynamic and interactive web pages.
Brief History of HTML
- In 1989, British computer scientist Tim Berners-Lee invented the World Wide Web while working at CERN, the European particle physics laboratory. He also created the first version of HTML, which he called “HTML Tags”.
- In 1991, Berners-Lee published a document titled “HTML Tags,” which described the first version of HTML. This document included basic tags like <html>, <head>, <title>, <body>, and <a> (for creating hyperlinks).
- In 1993, the first web browser, Mosaic, was released. This helped popularize the web and HTML.
- In 1995, HTML 2.0 was released as a standard by the World Wide Web Consortium (W3C), the main standards organization for the web. This version included new features like tables, image maps, and form elements.
- In 1997, HTML 3.2 was released, which added more features like frames, style sheets, and improved support for tables.
- In 1999, HTML 4.01 was released, which was a major update that included support for cascading style sheets (CSS), scripting with JavaScript, and more precise document layout control.
- In 2000, XHTML (Extensible HTML) was introduced as a reformulation of HTML 4.01 using XML syntax. XHTML was meant to be cleaner, more modular, and more extensible than HTML.
- In 2014, HTML5 was released as a major update to HTML. HTML5 introduced many new features, including video and audio elements, canvas for drawing graphics, semantic markup, and improved support for mobile devices.
HTML continues to evolve, with new features and improvements being added over time. It remains a fundamental part of web development and is used in conjunction with other technologies like CSS and JavaScript to create modern, dynamic websites and web applications.
HTML Versions
- HTML 1.0: The first version of HTML was released in 1991. It was a simple markup language that included only a few basic tags for structuring a document, such as <html>, <head>, <title>, and <body>.
- HTML 2.0: Released in 1995, this version of HTML added new features such as tables, image maps, and form elements.
- HTML 3.2: Released in 1997, HTML 3.2 included additional features such as frames, improved support for tables, and support for style sheets.
- HTML 4.01: Released in 1999, HTML 4.01 was a major update to the language. It introduced support for cascading style sheets (CSS), scripting with JavaScript, and improved document layout control.
- XHTML 1.0: Released in 2000, XHTML (Extensible HTML) was a reformulation of HTML 4.01 using XML syntax. It was designed to be cleaner, more modular, and more extensible than HTML.
- HTML5: Released in 2014, HTML5 is the latest version of HTML. It introduced many new features, such as video and audio elements, canvas for drawing graphics, semantic markup, and improved support for mobile devices. It also supports a wider range of multimedia and is designed to be more accessible to assistive technologies.
Each version of HTML builds upon the previous one and adds new features and improvements to the language. As of now, HTML5 is the most widely used version of HTML and is recommended for building modern web applications.
Features of HTML
- Tags and Elements: HTML uses tags and elements to define the structure and content of a web page. Tags are used to mark up different parts of the document, such as headings, paragraphs, images, links, and forms.
- Semantics: HTML provides semantic markup, which means that tags have specific meanings and are used to describe the content they contain. This helps search engines and other tools understand the structure and content of the page.
- Accessibility: HTML provides features that make web pages more accessible to people with disabilities. For example, it includes tags to provide alternative text for images and support for screen readers.
- Multimedia Support: HTML supports a wide range of multimedia content, including images, audio, and video. This allows developers to create rich, interactive web experiences.
- Cross-Platform Compatibility: HTML is designed to work on different platforms and devices, such as desktop computers, smartphones, and tablets. It is a core technology of the World Wide Web and is supported by all major web browsers.
- Extensibility: HTML can be extended through the use of custom tags and attributes, allowing developers to create their own markup languages or add additional functionality to HTML.
Overall, HTML provides a powerful set of tools for creating and structuring web content, allowing developers to create rich and engaging web experiences that are accessible to a wide range of users.
HTML text Editors
- Sublime Text: A popular text editor that supports many programming languages, including HTML. It has a clean and user-friendly interface, and includes features such as syntax highlighting and autocompletion.
- Atom: Another popular text editor that is open source and highly customizable. It includes many useful features such as integrated Git support and a built-in package manager.
- Visual Studio Code: A popular, free, and open-source text editor developed by Microsoft. It includes many features for web development, such as debugging, IntelliSense, and Git integration.
- Brackets: A lightweight and easy-to-use text editor designed specifically for web development. It includes features such as live preview, inline editing, and visual tools for working with CSS.
- Notepad++: A free and open-source text editor for Windows that supports many programming languages, including HTML. It includes features such as syntax highlighting and code folding.
- Dreamweaver: A professional HTML editor developed by Adobe. It includes many advanced features for web development, such as code validation, visual layout tools, and FTP/SFTP support.
There are many other text editors available for HTML development, and the choice of editor often comes down to personal preference and the specific needs of the project.
HTML code with Notepad. (Recommended for Beginners)
Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of Windows, from where you easily access it.
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML
Step 3: Save the HTML file with .htm or .html extension.
Step 4: Open the HTML page in your web browser.
To run the HTML page, you need to open the file location, where you have saved the file and then either double-click on file or click on open with option
HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)
When you will learn the basics of HTML, then you can use some professional text editors, which will help you to write an efficient and fast code. So to use Sublime Text editors, first it needs to download and install from internet. You can easily download it from this https://www.sublimetext.com/download link and can install in your PC. When installation of Sublime text editor done then you can follow the simple steps to use it:
Step 1: Open Sublime Text editor(Windows 8):
To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open it. To open a new page press CTRL+N.
Step 2: Save the page before writing any code.
To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save a file use extension .htm or .html. We recommend to save the file first then write the code because after saving the page sublime text editor will give you suggestions to write code.
Step 3: Write the code in Sublime Text editor
Step 4: Open the HTML page in your Browser
To execute or open this page in Web browser just right click by mouse on sublime text page and click on Open in Browser.
Note: You can execute HTML file in any browser, but there are some tags which are not supported by Some Web browser.
Building blocks of HTML
An HTML document consist of its basic building blocks which are:
- Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.
- Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.
Syntax
- <tag name attribute_name= ” attr_value”> content </ tag name>
- Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags are termed as HTML elements.
Example:
- <!DOCTYPE html>
- <html>
- <head>
- <title>The basic building blocks of HTML</title>
- </head>
- <body>
- <h2>The building blocks</h2>
- <p>This is a paragraph tag</p>
- <p style=“color: red”>The style is attribute of paragraph tag</p>
- <span>The element contains tag, attribute and content</span>
- </body>
- </html>
Output:
The building blocks
This is a paragraph tag
The style is attribute of paragraph tag
The element contains tag, attribute and content
HTML Syntax
HTML is based on a syntax that consists of elements, attributes, and values. An element is a part of an HTML document that is marked by a start tag and an end tag. Attributes provide additional information about an element and are defined within the opening tag of an element. Values are assigned to attributes to define their specific properties.
HTML Example with HTML Editor
The above code is a basic HTML example that includes the structure of an HTML document. Let’s go through each line of the code and understand what it does:
<!DOCTYPE>This line declares the document type as HTML5. It is mandatory to include this line at the beginning of your HTML document.
<html> This line indicates the start of an HTML document. Everything that goes inside the HTML tags will be interpreted as HTML code.
<head> This tag contains the head section of the HTML document. The head section includes information about the document like the title of the document, links to external stylesheets, and scripts.
You can copy and paste this code into an HTML editor and save it with a .html extension. Then, you can open the saved file in any web browser to view the web page.
HTML Structure
An HTML document consists of a few main components, including the document type declaration, the head section, and the body section.
The document type declaration is the first line of an HTML document and indicates the version of HTML being used. It is followed by the head section, which contains information about the document, such as the title of the page, metadata, and links to external resources.
The body section of an HTML document contains the content of the web page, including text, images, videos, and forms. This is where developers use HTML tags to structure the content and define the layout of the web page.
HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.
- All HTML tags must enclosed within < > these brackets.
- Every tag in HTML perform different tasks.
- If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)
Syntax
<tag> content </tag>
HTML Tag Examples
Note: HTML Tags are always written in lowercase letters.
The basic HTML tags are given below:
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
HTML Meta Tags
DOCTYPE, title, link, meta and style
HTML Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>
HTML Link Tags
<a> and <base>
HTML Image and Object Tags
<img>, <area>, <map>, <param> and <object>
HTML List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
HTML Scripting Tags
script and noscript
Note: We will see examples using these tags in later
