HTML – HyperText Markup Language
1. Definition 2. Features of HTML 3. Structure of an HTML Document 4. Common HTML Tags 5. HTML Attributes 6. Types of Elements 7. Semantic vs Non-Semantic Tags 8. Versions of HTML
1. Definition
- HTML stands for HyperText Markup Language.
- It is the standard markup language used to create and design webpages.
- HTML is used to define the structure and layout of a webpage using various tags and elements.
- It is not a programming language; it does not contain logic or conditions like a programming language.
- HyperText refers to the ability to link to other webpages through hyperlinks.
- Markup Language means it uses predefined tags to mark up text content for web display.
2. Features of HTML
- Easy to learn and use.
- Platform-independent and supported by all web browsers.
- Allows the inclusion of text, images, audio, video, and links.
- Provides structure to web documents.
- Enables the creation of user forms for input.
- Supports integration with CSS for styling and JavaScript for interactivity.
3. Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Explanation:
<!DOCTYPE html>– Declares the document as HTML5.<html>– Root element of the HTML page.<head>– Contains metadata such as the title and links to stylesheets.<title>– Specifies the title shown in the browser tab.<body>– Contains the content visible to the user (text, images, etc.).
4. Common HTML Tags
| Tag | Description |
|---|---|
<h1> to <h6> | Defines headings (h1 is largest) |
<p> | Defines a paragraph |
<a> | Creates a hyperlink |
<img> | Displays an image |
<br> | Inserts a line break |
<hr> | Inserts a horizontal line |
<div> | Container for block elements |
<span> | Container for inline content |
<ul> / <ol> | Unordered and ordered lists |
<li> | List item |
<table> | Creates a table |
<form> | Creates a form |
<input> | Input field inside a form |
<button> | Button element |
5. HTML Attributes
- Attributes provide additional information about HTML elements.
- They are always specified in the start tag.
- Common attributes include:
id: Unique identifierclass: Classification of elementssrc: Specifies the path of an image or mediahref: Specifies the URL of a linkalt: Alternative text for an imagestyle: Inline CSS stylingtitle: Tooltip text shown on hover
6. Types of Elements
- Block-level Elements: Start on a new line and take up the full width.
- Examples:
<div>,<p>,<h1>,<table>,<form>
- Examples:
- Inline Elements: Do not start on a new line and take only as much width as necessary.
- Examples:
<span>,<a>,<img>,<strong>,<em>
- Examples:
7. Semantic vs Non-Semantic Tags
- Semantic Tags: Clearly describe their meaning in a human- and machine-readable way.
- Examples:
<header>,<footer>,<article>,<section>,<nav>
- Examples:
- Non-Semantic Tags: Do not clearly describe their content.
- Examples:
<div>,<span>
- Examples:
8. Versions of HTML
- HTML 1.0 – Basic version with limited functionality.
- HTML 2.0 – First standard version.
- HTML 3.2 – Introduced scripting support and tables.
- HTML 4.01 – Introduced CSS support and scripting improvements.
- HTML5 – Latest version with support for audio, video, canvas, new semantic elements, and APIs.