Introduction to HTML
HTML stands for HyperText Markup Language. It is the core element for creating and designing webpages.
“HyperText” refers to links that connect web pages.
“markup Language” It is the set of rules or “codes” to describe the structure and organization of content. For example HTML uses tags where as other markup language uses tags, symbols or commands to organize or describe data in different ways, Learn more.
History of HTML
In 1989 a British scientist Tim Berners-Lee, invented the World Wide Web while working at CERN (European Organization for Nuclear Research). He proposed an idea of using hypertext (documents with links to other documents) to allow researchers to share documents over the internet.
Later in 1991 he created the first version of HTML. It was a simple system that uses tags for marking up documents.
- In 1995, HTML 2.0 released by Internet Engineering Task Force (IETF) adding more elements like tables and forms.
- In 1997, XHTML was introduced, It was the stricter version of HTML but later it phased out due to its complexity and lack of flexibility.
- In 2008, HTML5 specification was started with focusing on making interactive web pages. It added new tags, multimedia, canvas element and mobile-friendly.
- In 2014, HTML5 become official by World Wide Web Consortium (W3C).
HTML continues evolving with the incremental updates to meet the needs of modern web development.
Basic structure of an HTML page
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html><!DOCTYPE html>: Declares the document type and version of HTML.
<html>: Root element of the HTML page.
<head>: It contains meta-information like title, character set, and styles.
<title>: Sets the title in the browser tab.
<body>: Contains the visible content of the page.
HTML Self-Closing Tags
In HTML, self-closing tags are elements that don’t have the closing tags. Opening tag itself contains (/) before the closing angle bracket (>).
In modern HTML5, self-closing tags do not have slash, but for backward compatibility with older version of HTML (like XHTML), some developer still uses it.
example :-<img> – For images.<input> – For input fields.<br> – For like breaks.<hr> – For horizontal rules (lines).<meta> – For metadata in the document head.<link> – For linking to external resources like stylesheets.
HTML Lists
There are three main types of lists in HTML.
Ordered List<ol> displays items in numbered format.
<ol>
<li>Table</li>
<li>Chair</li>
<li>Plate</li>
</ol>Unordered List<ul> displays items with bullet points.
<ul>
<li>Apple</li>
<li>Grape</li>
<li>Orange</li>
</ul>Description List<dl> is used for name and value pairs, like terms and definitions.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>HTML Attributes
Attributes are the additional information about an element. They usually comes in name/value pairs. Examples :-<img src="image.jpg" alt="image not found"><div class="box" id="main-container"></div><input type="text" name="username">
Some attributes are boolean, like checked, readonly, disabled.<input type="checkbox" checked>
HTML Media
Modern websites use multimedia like images, videos, and audio to enhance user engagement and interactivity.
HTML provides tags such as <img> for images, <audio> for sound, and <video> for videos. These tags can include controls, sources, and fallbacks for better media integration.
Image:<img src="landscape.jpg" alt="Beautiful landscape" width="500">
Audio: <audio> tag is used to embed audio in html.
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>Video: <video> tag is used to embed video files.
<video width="320" height="240" controls>
<source src="video-file.mp4" type="video/mp4">
Your browser does not supports the video.
</video><source> : this tag is used inside <audio> and <video> tag to specify multiple file formats.
Embedding external media :
We can embed YouTube videos or audio using <iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/ui?=234a3432"
frameborder="0" allowfullscreen>
</iframe>HTML Tables
An HTML table is used to display data in a tabular format using rows and columns. Tables are created using the <table> element along with child elements like <tr> (table row), <th> (table header), and <td> (table data).
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maya</td>
<td>34</td>
<td>California</td>
</tr>
<tr>
<td>Maya</td>
<td>34</td>
<td>California</td>
</tr>
</tbody>
</table><table> : Defines the table.
<thead> : Wraps the header content.
<tbody> : Wraps the table body content.
<tr> : Table row.
<th> : Defines table header, it is by default bold and centered.
<td> : Defines table data.
HTML Forms
Forms are the most important topic in web development, allowing users to submit data that can be sent to a server processing.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="useremail">
<br>
<textarea name="message" rows="4" cols="50"></textarea>
<br>
<input type="submit" value="Submit">
</form>Attributes
action – Action attributes represent the URL to which the form data is sent.
method – It defines the HTTP methods get and post.
name – This is for backend and used as a key when submitting data.
id – It is uniquely identify the input.
required – It makes the field mandatory.
type – It represents the type of input like, text, email, password, etc.
HTML Comment
Comment are used to add notes or explanations within the code, browser ignore comments while rendering the page.
<-- This is a comment -->