HTML is the standard markup language used to create web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items.
In this tutorial, we will cover the basics of HTML, including the basic structure of an HTML document, HTML elements, attributes, and more. By the end of the tutorial, you will have a solid foundation in HTML and be ready to create your own web pages and projects.
Every HTML document must start with a document type declaration: <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML allows you to format and style text using various tags and attributes. Here are some examples:
You can also use CSS to style your HTML text:
HTML is the foundation of the web and it is made up of many different tags that help to structure and format content. Here are some of the most important HTML tags that you should be familiar with:
The <p> tag is used to define a paragraph of text. It is a block-level element, which means that it creates a new line and a new block of content. Paragraphs are commonly used to group together related text content.
<p>This is a paragraph</p>
Headings are used to provide structure and hierarchy to your content. There are six levels of headings, from <h1> to<h6>, with <h1> being the most important and <h6> being the least important. Headings should be used to organize your content and make it more readable.
<h1>This is h1 the biggest heading size</h1>
examples:
The <div> tag is used to create a section of content that can be styled and positioned independently from the rest of the document. It is a container element that is often used to group together related content or create layout structures.
<div>This is a div</div>
The <span> tag is similar to the <div> tag in that it is a container element. However, the <span> tag is an inline-level element, which means that it does not create a new line or a new block of content. Instead, it is used to apply styles or manipulate small sections of content within a larger block.
<span>This is a span</span>
Links and images are important elements in HTML. Here's how you can use them:
To create a link, use the <a> tag with the href attribute:
<a href="https://www.example.com">Example Link</a>
You can also use the target attribute to specify where the link should open:
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
To add an image, use the <img> tag with the src attribute:
<img src=""https://www.example.com/image.jpg" alt="Example Image">
You can also use the width and height attributes to resize the image:
<img src=""https://www.example.com/image.jpg"" alt="Example Image" width="400" height="300">
Lists are a great way to organize content in HTML. There are two types of lists you can create: ordered lists and unordered lists.
Ordered lists are numbered lists, where each item is numbered in order. To create an ordered list, use the <ol> tag:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
Unordered lists are bullet-pointed lists, where each item is preceded by a bullet point. To create an unordered list, use the <ul> tag:
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
You can also create nested lists, which are lists within lists. To create a nested list, you simply add another list within an existing list item.
Here's an example of a nested list:
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>Nested list item 1</li>
<li>Nested list item 2</li>
<li>Nested list item 3</li>
</ul>
</li>
<li>List item 3</li>
</ul>
Tables are used to display data in rows and columns:
| Name | Age | |
|---|---|---|
| John Smith | 35 | john@example.com |
| Jane Doe | 28 | jane@example.com |
| Bob Johnson | 42 | bob@example.com |
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>35</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>28</td>
<td>jane@example.com</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>42</td>
<td>bob@example.com</td>
</tr>
</tbody>
</table>
Forms are used to collect user input:
<form>
<label htmlFor="name">Name:</label>
<input type="text"id="name" name="name" />
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" />
<label htmlFor="password">Password:</label>
<input type="password"id="password" name="password" />
<button type="submit">Submit</button>
</form>
HTML5 introduced a number of new semantic tags that allow you to describe the content of your web pages in a more meaningful way. Here are some of the most commonly used tags:
Using semantic tags can help search engines and other tools better understand the structure and content of your web pages, and can also make it easier for people with disabilities to navigate your site.
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#"><Home></a></li>
<li><a href="#"><About></a></li>
<li><a href="#"><Contact></a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#"><Article 1></a></li>
<li><a href="#"><Article 2></a></li>
<li><a href="#"><Article 3></a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
HTML5 introduced the <audio> and <video> elements for embedding media in web pages.
The <audio> element is used to embed audio content in a web page. It supports various attributes such as src, controls, autoplay, loop, and more.
<audio src="/path/to/audio.mp3" controls></audio>
The <video> element is used to embed video content in a web page. It supports various attributes such as src, controls, autoplay, loop, width, height, and more.
<video src="/path/to/video.mp4" controls width="640" height="360"></video>
This tutorial covered the fundamentals of HTML, including text formatting and styles, working with links and images, creating lists, tables, and forms. We also introduced the concept of semantic HTML and how it can improve website accessibility and SEO.
However, HTML is a vast topic and there are many more tags and features to learn. We briefly discussed additional tags such as p, h1, h2, h3, h4, h5, h6, div, and span that are commonly used in web development. Learning these tags and their attributes can enhance the structure and presentation of your web pages.
Moving forward, we will delve into the world of CSS, which allows us to style and design our HTML content. With CSS, we can add colors, typography, layout, and more to our web pages. Stay tuned for our CSS tutorial!