What is HTML?
HTML is a markup language used to structure content on the web. It consists of a series of elements, defined by tags, which dictate how content should be displayed in a web browser. By combining these elements in various ways, you can create rich and interactive web pages.
HTML Document Structure
An HTML document has a specific structure, which begins with the <!DOCTYPE html> declaration. This declaration informs the browser that the document is an HTML5 document. Following this is the opening <html> tag, which is the root element of the page, and a closing </html> tag.
Within the <html> tag, there are two essential sections: the <head> and the <body>.
The <head> Section
The <head> section contains meta-information about the document, such as the title, character encoding, and links to external resources like stylesheets and scripts. It is important to note that the content within the <head> section is not displayed on the web page.
Here's an example of a simple <head> section:
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
The <body> Section
The <body> section contains the actual content of the web page, such as text, images, and links. This is where you will use various HTML elements to define the structure and appearance of your content.
Here's an example of a simple <body> section:
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<img src="example-image.jpg" alt="An example image">
</body>
Essential HTML Elements
There are many HTML elements, but some of the most common and essential ones are:
-
Headings: Headings are used to define the structure of your content. HTML has six levels of headings, from
<h1>(the most important) to<h6>(the least important). -
Paragraphs: The
<p>tag is used to define a paragraph of text. -
Links: The
<a>tag is used to create hyperlinks. Thehrefattribute specifies the destination URL. -
Images: The
<img>tag is used to embed images. Thesrcattribute specifies the image's source, and thealtattribute provides a description for screen readers and in cases where the image cannot be displayed. -
Lists: HTML has two types of lists - ordered (
<ol>) and unordered (<ul>). List items are defined using the<li>tag. -
Tables: Tables are created using the
<table>tag, with rows defined by the<tr>tag, and table headers (<th>) and data cells (<td>) within rows.
These elements, when combined, can create a basic web page with structured content.
Putting It All Together
Here's an example of a simple HTML document using the elements mentioned above:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<img src="example-image.jpg" alt="An example image">
<h2>Links</h2>
<p>Visit <a href="https://www.example.com">Example.com</a> for more information.</p>
<h2>Lists</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Next Steps
Now that you have a basic understanding of HTML, the best way to continue learning is by practicing. Create simple web pages, experiment with different elements, and explore additional resources to expand your knowledge. As you become more comfortable with HTML, you can also learn CSS and JavaScript to further enhance your web development skills. Happy coding!
