Welcome to the comprehensive HTML tutorial. Here you will learn the basics to advanced concepts of HTML.
HTML stands for HyperText Markup Language. It is the standard language for creating web pages. HTML describes the structure of a webpage using various elements.
HTML elements are the building blocks of HTML pages. An HTML element is defined by a start tag, some content, and an end tag.
<tagname>Content goes here...</tagname>
<p>This is a paragraph.</p>
HTML attributes provide additional information about HTML elements. They are always specified in the start tag.
<tagname attribute="value">Content</tagname>
<a href="https://www.example.com">This is a link</a>
HTML forms are used to collect user input. Forms contain form elements like input fields, checkboxes, radio buttons, submit buttons, etc.
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important heading.
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
HTML supports ordered, unordered, and description lists.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<dl>
<dt>Definition term</dt>
<dd>Definition description</dd>
</dl>
Links are an essential aspect of web pages. You can create links using the <a> tag.
<a href="https://www.example.com">Visit Example.com</a>
You can embed images in your HTML documents using the <img> tag.
<img src="image.jpg" alt="Description of image">
HTML tables are used to organize data in rows and columns. You can create tables using the <table> tag.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
HTML5 introduces semantic elements that provide meaning to the structure of your document, such as <header>, <footer>, <article>, and <section>.
<header>
<h1>Website Title</h1>
</header>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
HTML5 brought many new features and APIs that enhance web applications, including local storage, audio, video elements, and much more.
HTML5 allows you to embed video using the <video> tag.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Similar to video, you can embed audio using the <audio> tag.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
HTML forms can be enhanced using new input types in HTML5. These include email, date, range, and more.
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
HTML5 also includes validation attributes for forms such as required, pattern, etc.
<input type="text" required pattern="[A-Za-z]{3}" title="Three letter country code">
Some characters have special meanings in HTML. You can use character entities to display these characters.
< <
> >
& &
" "
' '
Although media queries are usually used in CSS, they play a significant role in responsive design for HTML elements.
<style>
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
Meta tags provide information about the HTML document. They can set the document's character set, author, keywords, and more.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free HTML Tutorial">
<meta name="keywords" content="HTML, CSS, JavaScript">
Define the character encoding for an HTML document using the <meta> tag.
<meta charset="UTF-8">
You can write comments in HTML that will not be displayed in the browser.
<!-- This is a comment -->
This tutorial covers the basics to advanced topics of HTML. With this knowledge, you can start creating complex and interactive web pages. Continue to explore more advanced features and keep practicing!