HTML (HyperText Markup Language)
HTML is the standard markup language for creating Web pages. It describes the structure of a Web page and consists of a series of elements which tell the browser how to display the content.
1. Introduction
- HTML stands for Hyper Text Markup Language.
- HyperText: The method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page.
- Markup: HTML tags mark the text inside them as a certain type of string (like a bold string, or a header string).
- Language: It is a language, as it has code-words and syntax like any other language.
2. The Building Blocks: Elements
An HTML element usually consists of a start tag, content, and an end tag.
<tagname>Content goes here...</tagname>- Start tag:
<p> - Content:
Hello World - End tag:
</p> - Element:
<p>Hello World</p>
Some elements are void elements (or empty elements) and do not have an end tag, such as <br> (line break) or <img> (image).
3. Attributes
Attributes provide additional information about HTML elements.
- All HTML elements can have attributes.
- Attributes are always specified in the start tag.
- Attributes usually come in name/value pairs like:
name="value".
Example:
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
<a href="https://www.google.com">Visit Google</a>4. The DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM is constructed as a tree of Objects.
Document
└── html
├── head
│ └── title
└── body
├── h1
└── a (href)This structure allows JavaScript to access and manipulate all the elements of an HTML document.
5. Semantic HTML
Semantic HTML means using HTML elements to reinforce the meaning of the information in web pages and web applications rather than merely to define its presentation or look.
- Non-semantic elements:
<div>and<span>- Tells nothing about its content. - Semantic elements:
<form>,<table>, and<article>- Clearly defines its content.
Using semantic tags is important for:
- Accessibility: Screen readers can use the tags to navigate the page.
- SEO: Search engines can better understand the content structure.
- Readability: It makes code easier to read and maintain for developers.
6. Evolution to HTML5
HTML has evolved significantly since its inception in the early 90s.
- HTML 4.01 (1999): A very successful version, but lacked support for modern web application needs (video, audio, local storage).
- XHTML (2000): A stricter, XML-based version of HTML. It was unforgiving of syntax errors.
- HTML5 (2014): Designed to replace both HTML 4, XHTML, and the DOM Level 2 HTML. It was built to handle rich media and web applications natively.
HTML5 is not just a markup language; it's a collection of standards and APIs that power the modern web.
For a detailed breakdown of HTML5 features, semantic elements, and new APIs, proceed to the HTML5 section: