HTML (HyperText Markup Language) is the standard language used to create and design web pages. It provides the structure and content for a webpage. Understanding the basics of HTML is essential for web development. Here’s a primer on HTML:
.png "Html")
An HTML document typically consists of the following parts:
```html
<!DOCTYPE html> <!-- Declaration defining the document type -->
<html> <!-- Root element of the document -->
<head> <!-- Metadata and links to external resources -->
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title> <!-- Title of the page -->
<link rel="stylesheet" href="styles.css"> <!-- Link to an external CSS file -->
</head>
<body> <!-- Content of the document -->
<h1>Welcome to My Website</h1> <!-- Main heading -->
<p>This is a paragraph of text.</p> <!-- A paragraph -->
<a href="https://www.example.com">Visit Example</a> <!-- A hyperlink -->
<img src="image.jpg" alt="Description of image"> <!-- An image -->
<ul>
<li>Item 1</li> <!-- List item -->
<li>Item 2</li>
</ul>
<footer> <!-- Footer section -->
<p>© 2024 Your Name</p>
</footer>
</body>
</html>
```
### 2. **HTML Elements and Tags**
HTML is made up of elements, which are defined by tags. Here are some common HTML tags:
- **`<!DOCTYPE html>`**: Declares the document type and HTML version.
- **`<html>`**: The root element of the HTML document.
- **`<head>`**: Contains metadata, such as the title, character set, and links to stylesheets.
- **`<body>`**: Contains the content of the document, such as text, images, and links.
- **`<title>`**: Sets the title of the page, displayed in the browser’s title bar or tab.
- **`<h1>` to `<h6>`**: Headings, where `<h1>` is the largest and `<h6>` is the smallest.
- **`<p>`**: Defines a paragraph.
- **`<a>`**: Defines a hyperlink. Uses the `href` attribute to specify the URL.
- **`<img>`**: Embeds an image. Uses the `src` attribute to specify the image source and `alt` for alternative text.
- **`<ul>`**: Defines an unordered (bulleted) list.
- **`<ol>`**: Defines an ordered (numbered) list.
- **`<li>`**: Defines a list item.
- **`<table>`**: Defines a table.
- **`<tr>`**: Defines a table row.
- **`<td>`**: Defines a table cell.
- **`<th>`**: Defines a table header cell.
- **`<footer>`**: Defines a footer for a document or section.
### 3. **Attributes**
HTML elements can have attributes that provide additional information about the element. Attributes are specified in the opening tag of an element. For example:
```html
<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="Description of image" width="500" height="300">
```
- **`href`**: Specifies the URL of a link.
- **`target="_blank"`**: Opens the link in a new tab.
- **`src`**: Specifies the path to an image.
- **`alt`**: Provides alternative text for an image.
- **`width` and `height`**: Specify the dimensions of an image.
### 4. **HTML Comments**
Comments are used to leave notes in the HTML code and are not displayed in the browser.
```html
<!-- This is a comment -->
<p>This is visible content.</p>
```
### 5. **HTML Document Structure**
- **`<!DOCTYPE html>`**: Defines the document type and version of HTML.
- **`<html>`**: Contains the entire HTML document.
- **`<head>`**: Contains meta-information and links to external resources.
- **`<body>`**: Contains the main content of the document.
### 6. **Basic HTML Example**
Here’s a simple HTML document example:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML document.</p>
<a href="https://www.example.com">Visit Example</a>
<img src="example.jpg" alt="Example Image">
</body>
</html>
```
### Conclusion
HTML provides the foundational structure for web pages. By using various elements and attributes, you can create structured and interactive web content. As you become more comfortable with HTML, you can start exploring CSS for styling and JavaScript for interactivity.
Check this also-One Basic HTML Code
Thanks For Reading.
.png)
.png)
.png)
.png)
.png)
.png&description=Basics of HTML){kind=link}
0 Comments