HTML tutorial
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides the structure and content of a webpage by using a system of markup tags. Here's a breakdown of key concepts in HTML:
- Elements: HTML documents are made up of elements, which are defined by HTML tags. Elements are the building blocks of HTML pages. Each element begins with a start tag <tag> and ends with an end tag </tag>. Some elements are self-closing and don't require an end tag.
- Tags: Tags are keywords enclosed in angle brackets that define how content should be displayed on a webpage. They can be categorized into two types:
- Container tags: These consist of both start and end tags and enclose content between them. Example: <p> (paragraph), <div> (division), <span>.
- Empty or self-closing tags: These don't have an end tag and are used to insert elements like images, line breaks, etc. Example: <img> (image), <br> (line break).
- Attributes: Tags can have attributes, which provide additional information about the element. Attributes are placed within the start tag and are written as name-value pairs. Example: <img src="image.jpg" alt="Image">. Here, src and alt are attributes.
- Document Structure: HTML documents follow a hierarchical structure known as the Document Object Model (DOM). It consists of the following basic structure:
<!DOCTYPE html>
<html>
<head>
<!-- Metadata and external resources -->
<title>Title of the Document</title>
</head>
<body>
<!-- Content of the Document -->
</body>
</html>
- Semantic Elements: HTML5 introduced semantic elements that provide meaning to the content. These elements describe their content more accurately and improve SEO and accessibility. Examples include <header>, <nav>, <footer>, <article>, <section>, <aside>, etc.
- Common Elements: HTML offers a wide range of elements for structuring content, including headings (<h1> to <h6>), paragraphs (<p>), lists (<ul>, <ol>, <li>), tables (<table>, <tr>, <td>), forms (<form>, <input>, <button>), links (<a>), and more.
HTML works together with Cascading Style Sheets (CSS) for styling and JavaScript for interactivity to create rich and dynamic web pages. It forms the backbone of web development, providing the foundation for creating structured, semantic, and accessible content on the web.
Why Learn HTML?
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.
HTML is a MUST for students and working professionals to become great Software Engineers, especially when they are working in the Web Development Domain. Here are some key advantages of learning HTML:
- Create Web site - You can create a website or customize an existing web template if you know HTML well.
- Become a web designer - If you want to start a career as a professional web designer, HTML and CSS designing are must-have skills.
- Understand web - If you want to optimize your website to boost its speed and performance, it is good to know HTML to yield the best results.
- Learn other languages - Once you understand the basics of HTML, other related technologies like JavaScript, PHP, or Angular become easier to understand.
The creation and development of HTML involved contributions from various individuals and organizations over time. Here's a simplified timeline highlighting some key milestones in the evolution of HTML:
- Tim Berners-Lee (1989-1990):
- Tim Berners-Lee, a British computer scientist, invented the World Wide Web while working at CERN (European Organization for Nuclear Research) in Switzerland.
- In 1990, he introduced the first version of HTML (HTML 1.0) along with the concept of URLs, HTTP, and HTML tags to create and format web documents.
- IETF (Internet Engineering Task Force) (1995):
- The Internet Engineering Task Force standardized HTML through the publication of RFC 1866, which defined HTML 2.0.
- HTML 2.0 included enhancements such as forms, tables, and text formatting.
- W3C (World Wide Web Consortium) (1997-present):
- The World Wide Web Consortium (W3C) was founded in 1994 to oversee the development of web standards.
- HTML 3.2 was released in 1997 as the first W3C recommendation, introducing features like tables, applets, and text flow around images.
- HTML Working Group (1998-present):
- The HTML Working Group within W3C was formed to develop HTML standards further.
- HTML 4.01 was released in 1999, providing more features for web development, including style sheets, scripting, and multimedia support.
- WHATWG (Web Hypertext Application Technology Working Group) (2004-present):
- In response to perceived stagnation in W3C's HTML development process, WHATWG was formed by individuals from Apple, Mozilla, and Opera.
- WHATWG started working on HTML5, aiming to modernize and standardize web technologies.
- HTML5 (2014):
- HTML5, the latest major version of HTML, was published as a W3C recommendation in 2014.
- It introduced numerous new features and APIs for multimedia, graphics, forms, and semantics, aiming to improve the capabilities of web applications.
- Living Standard (2019-present):
- HTML has transitioned to a "living standard" maintained by both W3C and WHATWG.
- It allows for continuous updates and improvements without waiting for major version releases, ensuring the timely integration of new features and addressing issues.
Throughout its history, HTML has evolved through collaboration among individuals, organizations, and communities to meet the changing needs of the web. The ongoing development of HTML continues to shape the future of web technologies and digital experiences.