1. Developed By and When
HTML (HyperText Markup Language) was invented by Tim Berners-Lee in 1991 while working at
CERN.
2. What is HTML?
HTML is the standard markup language used to create web pages. It defines the structure of a web document using
elements represented by tags.
3. Versions of HTML
- HTML 1.0 – 1993
- HTML 2.0 – 1995
- HTML 3.2 – 1997
- HTML 4.01 – 1999
- XHTML – 2000
- HTML5 – 2014 (most recent stable version)
4. Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
Structure in Detail
What are Tags and Elements in HTML ?
Tags :
- The keywords enclosed in angle brackets < > that tell the browser what to do or how to interpret
content.
-
(closing tag) Tags are like instructions or labels. Tags alone don’t mean much without content.
Example : <p> (opening tag), </p>(closing tag)
Element :
- The complete structure that includes the opening tag, the content, and the closing
tag (if needed).
- An element is everything together (tag + content). It represents actual content on the page.
Example : <p> This is a paragraph </p>
Types of Elements
- Block-Element : A block-level element is an HTML element that starts on a new line and
takes up the full width of its container by default (even if the content inside it is small).
For Ex-
<div>, <h1> - <h6>
- Inline-Element : An inline element is an HTML element that does not start on a new line and
only takes up as much width as its content requires.
For Ex-
<a>, <strong> , <span>, <img>, <input>
See More Tags
5. Commonly Used Tags
<h1> to <h6> – Headings<p> – Paragraph<a href=""> – Anchor (link)<img src=""> – Image<ul>, <ol>, <li> – Lists<table>, <tr>, <td> – Tables <div> – Division (block container)<span> – Inline container
Learn table in short Learn table in Detail
6. HTML Attributes
Attributes provide additional information about elements. Example:
<a href="https://example.com" target="_blank">Visit</a>
Common attributes: href, src, alt, id, class,
style, target
7. Forms in HTML
HTML forms are used to collect user input.
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
8. Semantic HTML
Semantic elements clearly describe their meaning:
<header><footer><article><section><nav><aside>
9. HTML Entities
Special characters in HTML:
& = &< = <> = > = (non-breaking space)© = ©
View more Entities
10. HTML Comments
Comments are not displayed in the browser.
<!-- This is a comment -->
11. HTML Layout
See Flexbox cheatsheet Image
In HTML, a layout refers to the way web page content is structured and visually arranged on the screen. It’s
about organizing elements like headers, navigation bars, sidebars, main content, and footers so they appear in a
clear, usable, and attractive way.
Although HTML defines the structure (the content and its semantic meaning), the actual layout—how things are
positioned—comes from combining HTML + CSS.
Common Layout Components
- Header: This section usually contains the website logo, title, and top navigation links.
- Navigation: Provides menus or links to help users navigate different pages of the website.
- Main Content: The primary area where the core content of the webpage is displayed.
- Sidebar: A section often placed on the side that contains additional information, links, or widgets.
- Footer: Located at the bottom, it typically includes copyright information, contact links, or
disclaimers.
View in Detail
