HTML Basics

Date :	04 Feb 2025
Author :	DeepSeek
Tags :	html web development beginner

HTML (HyperText Markup Language) is the foundation of every website. It provides the structure and content for web pages, allowing browsers to render text, images, links, and more. If you’re new to web development, understanding the basics of HTML is the first step toward building your own websites. In this guide, we’ll cover the essential concepts of HTML: structure, elements, tags, and attributes.

The Basic Structure of an HTML Document

Every HTML document follows a standard structure. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Let’s break this down:

<!DOCTYPE html>: This declaration defines the document type and version of HTML (HTML5 in this case).
<html>: The root element that wraps all the content on the page. The lang attribute specifies the language (e.g., en for English).
<head>: Contains meta-information about the document, such as the character set, viewport settings, and the title.
<body>: Contains the visible content of the web page, such as headings, paragraphs, images, and links.

HTML Elements and Tags

HTML documents are made up of elements, which are defined by tags. Tags are enclosed in angle brackets (< >) and usually come in pairs: an opening tag and a closing tag.

Common HTML Elements

Here are some of the most commonly used HTML elements:

Headings: <h1> to <h6>
Headings define the hierarchy of your content. <h1> is the most important, and <h6> is the least.
```
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
Paragraphs: <p>
Paragraphs are used for blocks of text.
```
<p>This is a paragraph.</p>
```
Links: <a>
Links are created using the <a> tag with the href attribute.
```
<a href="https://example.com">Visit Example</a>
```
Images: <img>
Images are added using the <img> tag. The src attribute specifies the image source, and the alt attribute provides alternative text.
```
<img src="image.jpg" alt="A description of the image">
```
Lists: <ul>, <ol>, and <li>
- Unordered lists (<ul>) are used for bullet points.
- Ordered lists (<ol>) are used for numbered lists.
- List items (<li>) define individual items in a list.
```
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```
Divisions: <div>
The <div> tag is a container used to group and style content.
```
<div>This is a div element.</div>
```

HTML Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs like name="value".

Common Attributes

class: Assigns a class name to an element for styling or JavaScript.
```
<p class="intro">This is an introduction.</p>
```
id: Assigns a unique identifier to an element.
```
<div id="header">This is the header.</div>
```

href: Specifies the URL for links.

<a href="https://example.com">Click here</a>

src: Specifies the source file for images or scripts.
```
<img src="photo.jpg" alt="A photo">
```
alt: Provides alternative text for images (useful for accessibility).
```
<img src="logo.png" alt="Company Logo">
```

style: Adds inline CSS to an element.

<p style="color: blue;">This text is blue.</p>

Putting It All Together

Here’s an example of a complete HTML page using the concepts we’ve covered:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p class="intro">This is a simple HTML page.</p>
    <a href="https://example.com">Visit Example</a>
    <img src="image.jpg" alt="An example image">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</body>
</html>

Conclusion

Understanding the basics of HTML—its structure, elements, tags, and attributes—is essential for anyone starting their journey in web development. With this knowledge, you can begin creating your own web pages and exploring more advanced topics like CSS and JavaScript. Happy coding!

HTML Basics

The Basic Structure of an HTML Document

HTML Elements and Tags

Common HTML Elements

HTML Attributes

Common Attributes

Putting It All Together

Conclusion

Further Reading

Table of Blogs

html

css

javascript

Table of Contents