HTML Introduction EXPLAIN
What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.
-
Definition:
- HTML stands for HyperText Markup Language. It is the cornerstone technology for the World Wide Web, alongside CSS and JavaScript.
-
Purpose:
- HTML is used to define the structure of web pages using markup. It describes the content and layout of a web page in a way that can be understood by web browsers.
Key Features of HTML:
-
- HTML documents are made up of HTML elements. These elements are represented by tags. Tags are the building blocks of HTML and are enclosed in angle brackets (
< >). Most tags come in pairs: an opening tag and a closing tag (e.g.,<p>and</p>for paragraphs).
- HTML documents are made up of HTML elements. These elements are represented by tags. Tags are the building blocks of HTML and are enclosed in angle brackets (
-
Basic Structure:
- An HTML document starts with a
<!DOCTYPE html>declaration, followed by the<html>element which wraps the entire content. Inside<html>, there are typically two main sections:<head>and<body>.<head>: Contains meta-information about the document, such as the title, character set, and links to stylesheets and scripts.<body>: Contains the actual content of the webpage, such as text, images, links, and other elements.
- An HTML document starts with a
-
Common HTML Elements:
- Headings:
<h1>to<h6>tags define headings, with<h1>being the highest level. - Paragraphs:
<p>tag defines a paragraph of text. - Links:
<a>tag defines a hyperlink. - Images:
<img>tag embeds an image. - Lists:
<ul>for unordered lists,<ol>for ordered lists, and<li>for list items. - Tables:
<table>,<tr>(table row),<td>(table cell), and<th>(table header) tags define a table structure. - Forms:
<form>,<input>,<textarea>,<button>, and other tags define user input forms.
- Headings:
Attributes:
- HTML elements can have attributes that provide additional information about the element. Attributes are placed within the opening tag and usually come in name/value pairs (e.g.,
href="http://example.com"in an<a>tag).
HTML is an essential technology for web development, providing the structure and content of web pages. By using HTML tags and attributes, developers can create complex and well-organized web pages that are the foundation of all web content. Understanding HTML is the first step towards becoming proficient in web development.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document - The
<html>element is the root element of an HTML page - The
<head>element contains meta information about the HTML page - The
<title>element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab) - The
<body>element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The
<h1>element defines a large heading - The
<p>element defines a paragraph.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
The HTML element is everything from the start tag to the end tag:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
In HTML, some elements are called “empty elements” or “void elements” because they do not have any content and do not need a closing tag. These elements are self-contained and typically used for simple tasks like creating a line break, inserting an image, or adding metadata. Here are some examples and explanations of empty elements in HTML:
Examples of Empty Elements:
<br> – Line Break:
- The
<br>tag inserts a line break, making the text after it start on a new line. - <p>This is a paragraph.<br>This is a new line within the same paragraph.</p>
<img> – Image:
- The
<img>tag is used to embed an image in an HTML page. It requires thesrcattribute to specify the image source and analtattribute for alternative text. - <img src=”image.jpg” alt=”Description of the image”>
<input> – Input Field:
- The
<input>tag is used to create various input controls in a form, such as text fields, checkboxes, radio buttons, and submit buttons. - <input type=”text” name=”username”>
<input type=”submit” value=”Submit”>
<hr> – Horizontal Rule:
- The
<hr>tag creates a horizontal line, often used to separate content sections.
<p>Text above the line.</p>
<hr>
<p>Text below the line.</p>
<meta> – Metadata:
- The
<meta>tag provides metadata about the HTML document, such as character set, author, or viewport <meta charset=”UTF-8″>
<meta name=”description” content=”Free Web tutorials”>
settings. It is placed inside the<head>section.
Table of Contents
Read more:- Data and File Management
