What is the HTML
HTML, or HyperText Markup Language, is the standard language used to create and design documents on the World Wide Web. HTML elements are the building blocks of HTML pages, and they are represented by tags. Tags are enclosed in angle brackets and usually come in pairs: an opening tag and a closing tag. The closing tag has a forward slash before the tag name.
Basic Structure of an HTML Document
An HTML document has a hierarchical structure, with a head and a body. Here is an example of a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my web page.</p>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
Output:
.png)
Explanation of the Example
1. Document Type Declaration (`<!DOCTYPE html>`):
- This declaration defines the document type and version of HTML being used. `<!DOCTYPE html>` indicates that the document is an HTML5 document.
2. HTML Tag (`<html>...</html>`):
- The `<html>` tag is the root element of an HTML document. All other HTML elements are contained within this tag.
3. Head Tag (`<head>...</head>`):
- The `<head>` element contains meta-information about the document, such as its title and links to stylesheets and scripts.
4. Title Tag (`<title>...</title>`):
- The `<title>` element sets the title of the web page, which is displayed in the browser's title bar or tab.
5. Body Tag (`<body>...</body>`):
- The `<body>` element contains the content of the web page that is visible to users, such as text, images, and links.
6. Header Tag (`<h1>...</h1>`):
- The `<h1>` tag is used for the main heading of the document. There are six levels of headings, from `<h1>` (most important) to `<h6>` (least important).
7. Paragraph Tag (`<p>...</p>`):
- The `<p>` tag is used to define a paragraph of text.
8. Anchor Tag (`<a href="...">...</a>`):
- The `<a>` tag creates a hyperlink. The `href` attribute specifies the URL of the page the link goes to.
Additional HTML Tags
Here are a few more commonly used HTML tags:
- Image Tag (`<img src="..." alt="...">`):
<img src="image.jpg" alt="Description of image">
- The `src` attribute specifies the path to the image.
- The `alt` attribute provides alternative text for the image if it cannot be displayed.
- Unordered List (`<ul>...</ul>`):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- The `<ul>` tag defines an unordered list. Each list item is enclosed in `<li>` tags.
- Ordered List (`<ol>...</ol>`):
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
- The '<ol>' tag defines an ordered list. Each list item is enclosed in `<li>` tags.
- Div Tag (<div>...</div>):
<div>
<p>This is a division or section in an HTML document.</p>
</div>
- The `<div>` tag is used as a container for HTML elements, often used for styling with CSS or scripting with JavaScript.
HTML Attributes
HTML tags can have attributes that provide additional information about the elements. Attributes are always included in the opening tag and usually come in name/value pairs like `name="value"`. For example:
<a href="https://www.example.com" target="_blank">Open Example in a New Tab</a>
- Here, `href` specifies the URL of the link, and `target="_blank"` specifies that the link should open in a new tab.