Getting Started with Basics

History of Web
Tim Berners-Lee created HTML in late 1991 but didn't release it officially. He
published it later in 1995 as HTML 2.0. The idea behind creating the Web was to
create a service that helps everyone communicate, share, and receive information.
Then came HTML 4, which served as a major version of HTML. HTML has evolved
very much and received various updates since its creation. With each version, the
creation of web pages got
easier and more stylish.

HTML is generally used to design the basic structure of the web pages, which will
be improved using other technologies like CSS and JavaScript. CSS controls the
looks, feel, layout and formatting, whereas JavaScript is used to control different
elements' behaviour on the page.

What is HTML:
HTML, or Hypertext Markup Language, serves as the backbone of the World Wide
Web, providing a standardized method for creating and structuring content on web
pages. It is a markup language that uses a system of tags to define and organize
various elements, such as headings, paragraphs, links, images, forms, and more.
These tags instruct web browsers on how to present and display content to users.
HTML plays a crucial role in web development, facilitating the creation of visually
appealing, well-organized, and interactive websites.

HTML uses a system of tags, which are enclosed in angle brackets (< >), to define
different components and attributes of a webpage. At its core, HTML is a markup
language, not a programming language, as it doesn't possess the logical and
computational capabilities of languages like JavaScript or Python. Instead, HTML
focuses on defining the structure and semantics of a document. Each HTML tag has
a specific purpose, and by combining these tags, developers can create a hierarchy
of elements that form the structure of a webpage.
 HTML lays the foundation for web development, working in tandem with cascading
style sheets (CSS) for styling and presentation, and JavaScript for interactivity. As the
cornerstone of the web, HTML empowers developers to create structured,
accessible, and user-friendly content that can be seamlessly viewed across various
devices and platforms. Understanding HTML is a fundamental step for anyone
entering the field of web development.

History of HTML:
The history of HTML can be traced back to 1989 when Sir Tim Berners-Lee, a British
computer scientist, envisioned the World Wide Web. The first version, HTML 1.0, was
introduced in 1991, laying the foundation with basic tags for text formatting. HTML
2.0, released in 1995, expanded its capabilities by introducing features like tables.
HTML 3.2, in 1997, further evolved by adding support for scripting languages, paving
the way for more dynamic web pages. HTML 4.01, arriving in 1999, marked a
significant milestone with advanced features such as stylesheets and scripting
capabilities, enhancing the overall web development experience.

The subsequent introduction of XHTML in 2000 aimed to align HTML with XML
standards, emphasizing the importance of a more structured and rigorous syntax.
However, HTML5, finalized in 2014, emerged as a game-changer. HTML5 not only
addressed the shortcomings of its predecessors but also introduced groundbreaking
features, including native support for audio and video, improved semantics, and
enhanced support for creating responsive and interactive websites. HTML5 has since
become the standard for modern web development, shaping the way websites are
built and experienced across a variety of devices.

Versions of HTML:
● HTML 1.0 (1991): The inaugural version, introducing basic text formatting tags.
● HTML 2.0 (1995): Expanded features to include tables, enhancing the layout
possibilities for developers.
● HTML 3.2 (1997): Added support for scripting languages, enabling the
development of more interactive web pages.
● HTML 4.01 (1999): Significantly advanced web development with features like
stylesheets and scripting capabilities.
 ● XHTML (2000): Aimed to align HTML with XML standards,
emphasizing a stricter and more structured syntax.
● HTML5 (2014): The latest and most comprehensive version, revolutionizing web

development with native multimedia support, improved semantics, and

enhanced capabilities for creating modern and responsive websites. HTML5 has
become the industry standard, shaping the landscape of contemporary web
development practices.

HTML Boilerplate:
HTML boilerplate refers to a standardized and basic structure of HTML code that
serves as a starting point for building a web page. It is essentially a template that
includes the essential elements required for every HTML document. Creating an
HTML boilerplate is a common practice among web developers to ensure
consistency, save time, and adhere to best practices. Here's a breakdown of the key
components of an HTML boilerplate:

Document Type Declaration (<!DOCTYPE html>): This declaration specifies the

version of HTML that the document follows. In modern web development,
<!DOCTYPE html> is used to indicate HTML5.

HTML Opening and Closing Tags (<html>...</html>): The root element of an HTML
document. All other elements are nested within these tags.

Head Section (<head>...</head>): This section contains meta-information about the

HTML document, such as the title of the page, links to external stylesheets or scripts,
and other metadata.

Meta Charset Tag (<meta charset="utf-8">): This meta tag declares the character
encoding for the document, ensuring proper interpretation of the text.

Title Tag (<title>...</title>): This tag defines the title of the HTML document, which
is displayed in the browser's title bar or tab.

Body Section (<body>...</body>): The main content of the HTML document resides
within these tags. Elements like headings, paragraphs, images, links, and other
 visible content are placed here.

H1 and H2 Tags:
HTML <h1> and <h2> tags are part of the heading elements used to define headings
or titles within a webpage. These tags play a crucial role in structuring content and
indicating the hierarchy of information.

<h1> Tag: -

● The <h1> tag is the highest-level heading in HTML and signifies the main heading
or title of a webpage.
● It carries significant semantic weight, representing the primary topic or purpose
of the document.
● There should be only one <h1> tag per page, reflecting the most important
heading on that page.
<h2> Tag:

● The <h2> tag is a lower-level heading that comes after <h1> in the hierarchy.
● It is used to create subheadings or section titles within the content of the
webpage.
● Multiple <h2> tags can be employed to organize and structure the page effectively.

Heading Hierarchy:

● HTML heading tags follow a hierarchy from <h1> to <h6, where <h1> is the
highest and <h6> is the lowest.
● It is crucial to maintain a logical and sequential order in using heading tags to
ensure a proper document structure.

Example of Hierarchy:
 Semantic Meaning:

Heading tags in HTML provide semantic meaning to content, aiding both accessibility
and search engine optimization.

They assist screen readers in understanding the structure of a document, making it

more accessible to users with disabilities.

Search engines use heading tags to comprehend the content hierarchy, influencing
page ranking.

We will be going to learn in detail about these tags in the next Lecture.

Conclusion:
In summary, delving into the fundamentals of web development reveals a rich
history of HTML, initiated by Tim Berners-Lee in the early 1990s. From the
foundational HTML 1.0 to the transformative HTML5, each version has contributed
to simplifying web page creation and enhancing stylistic possibilities. HTML, as the
backbone of the World Wide Web, collaborates with CSS and JavaScript to structure,
style, and add interactivity to web content. The journey through HTML's evolution
and its role in web development is complemented by exploring various resources for
in-depth understanding.

Moving forward, the exploration extends to HTML boilerplate, a standardized

template streamlining the creation of web pages. The HTML boilerplate comprises
essential elements like the document type declaration, HTML tags, head and body
sections, and meta information. This structured foundation aligns with best practices
in web development, ensuring consistency and efficiency. The narrative then shifts
to the significance of heading elements (<h1> and <h2>) in HTML, emphasizing their
hierarchical structure, semantic meaning, and pivotal role in accessibility and SEO.
The conclusion underscores the promise of continued learning in upcoming lectures,
solidifying the foundation for comprehensive understanding and proficiency in web
development.
References:
● https://webfoundation.org/about/vision/history-of-the-web/

● https://www.sitesbay.com/css/css-history

● https://auth0.com/blog/a-brief-history-of-javascript/