HTML stands for Hypertext Markup Language. It is a special language used to build web pages. When you visit a website, the computer reads HTML to show you the words, pictures, and links. Think of HTML as the building blocks of a website. Just like you use Lego pieces to build a house or a car, we use HTML tags to build a web page.
HTML is the code that tells a computer how to display text, images, videos, and links on a web page. It is like giving instructions to a friend who is drawing a picture for you. HTML uses words inside angle brackets, which are called tags, to mark the beginning and the end of a part of the web page.
Every website you visit uses HTML in some way. Without HTML, there would be no web pages for you to see. HTML helps to organize content and tells the computer how to display the page. It is the very first thing one learns in web development because it makes the internet work!
An HTML document has a special structure. It starts with a declaration called <code><!DOCTYPE html></code> that tells the computer the page uses HTML. Then the document is divided into two main parts: the head and the body.
A very simple HTML document looks like this:
<code><!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html> </code>
In this example, the <head> section gives the title of the page, and the <body> section is where you put the content that appears on the screen.
HTML uses tags to mark different parts of the web page. A tag is a word inside angle brackets. For example, <code><p></code> tells the computer that what follows is a paragraph. When you finish the paragraph, you use the closing tag, <code></p></code>, to indicate the end.
An element in HTML consists of an opening tag, some content, and a closing tag. For example:
<code><p>This is a paragraph.</p></code>
Each tag instructs the web browser on how to display the content.
There are many tags in HTML. Some of the most common ones are:
Attributes provide extra information about an HTML element. They are added to the opening tag inside the tag’s angle brackets. The most common attributes are src and alt used with the image tag.
For example, to add an image, you might write:
<code><img src="picture.jpg" alt="A nice picture"></code>
Here, src tells the browser where the image file is, and alt provides a description of the image if it cannot be displayed.
The HTML document is split into two parts:
Links allow you to jump from one page to another. In HTML, we create links using the <a> tag. The attribute href inside the tag tells the browser the destination of the link.
For example:
<code><a href="https://www.example.com">Visit Example.com</a></code>
When you click on this link, your browser will open the website example.com.
Images brighten up a web page and make it more interesting. To add an image, you use the <img> tag. Remember, the <img> tag does not have a closing tag.
Here is how you add an image:
<code><img src="sunflower.jpg" alt="A bright sunflower"></code>
This code tells the browser to display an image of a sunflower. The src attribute points to the image location, and the alt attribute provides a description of the image.
Lists organize information into a neat format. There are two main types of lists in HTML:
Here is an example of an unordered list:
<code><ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul> </code>
And here is an example of an ordered list:
<code><ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol> </code>
Tables help display information in rows and columns. They are useful when you need to compare data or list items in a grid.
Here is a simple example of an HTML table:
<code><table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>10</td>
</tr>
</table> </code>
In this table, <tr> defines a table row, <th> is used for the table header (bold text), and <td> is used for table data (the cells).
HTML also lets you add multimedia like sound and video. With the <audio> tag, you can include sound files. With the <video> tag, you can embed video players in your web page.
Here is an example of a video embed code:
<code><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video> </code>
This code creates a video player with buttons to play, pause, or change the volume. The controls attribute tells the browser to show these buttons.
Every website on the internet is built with HTML. Imagine you are visiting your school’s website, a fun game site, or reading an online story. HTML is working behind the scenes to arrange the text, pictures, and other content so that you can see them clearly.
For example, when you see a picture of your favorite cartoon character online or click a link to read more about a fun topic, HTML is there to make that work.
Let’s look at a simple project. Imagine you want to make a small web page about your favorite animal, like a cat. You can include a title, a paragraph about cats, a picture, and even a link to a website with fun cat facts.
Your HTML code might look like this:
<code><!DOCTYPE html>
<html>
<head>
<title>My Favorite Animal</title>
</head>
<body>
<h1>All About Cats</h1>
<p>Cats are playful and soft. They love to sleep and purr. Many people love having cats as pets.</p>
<img src="cat.jpg" alt="A cute cat">
<a href="https://www.catfacts.com">Learn more about cats</a>
</body>
</html> </code>
This project uses headings, paragraphs, images, and links. It shows how HTML is used to build a complete web page with many parts.
While HTML builds the structure of a web page, there are other tools that make websites look and behave in fun ways.
Even though today we are learning about HTML, knowing about CSS and JavaScript helps us understand how websites are made.
As you explore HTML, you will find many other tags. Here are a few more to know:
These tags give you more control over how your content appears on a web page.
HTML has changed a lot since it was first created. Many new tags and features have been added over time. Each new version of HTML makes it easier to create complex and beautiful websites. Today, HTML works together with CSS and JavaScript to build modern websites that are fun to use and look great.
This evolution means that HTML is both easy to learn and powerful enough for creating everything from simple web pages to complex web applications.
While learning HTML is fun, it is always important to stay safe on the internet. When you visit websites or explore online content, remember to always ask an adult for help if you are unsure about something. Your safety comes first, and learning HTML should always be a fun and secure experience.
Let’s look at some important terms you have learned today:
HTML is used in many real-world settings. Here are some examples:
These examples show how HTML is a very useful tool in many parts of everyday life.
Today, we learned that HTML is short for Hypertext Markup Language. It is the basic language used to create web pages. Here are the key points to remember:
HTML is the foundation of every website you see on the internet. With simple building blocks like tags and attributes, you can create fun and interactive pages. As you continue to learn, you will see how HTML helps bring web pages to life, making the internet a useful and exciting place to explore.
