Explain HTML Basics.
Sure, let's dive into the basics of HTML!
HTML, or HyperText Markup Language, is the standard markup language for creating and structuring content on the World Wide Web. Here are some fundamental concepts and tags you should know:
-
Document Structure:
<!DOCTYPE html>: This declaration helps with browser compatibility and ensures that the page is rendered in standards mode.<html>: The root element of an HTML page.<head>: Contains meta-information about the HTML document, like its title and links to scripts or stylesheets.<title>: Specifies a title for the web page (displayed on the browser's title bar or in the page's tab).
<body>: Contains the content that is displayed on the web page.
-
Headings:
<h1>to<h6>: Define HTML headings, with<h1>being the highest level and<h6>the lowest.
-
Paragraphs and Text:
<p>: Defines a paragraph of text.<strong>: Defines important text.<em>: Defines emphasized text.<mark>: Defines marked/highlighted text.
-
Links:
<a>: Defines a hyperlink. Thehrefattribute specifies the URL of the page the link goes to.- Example:
<a href="https://www.example.com">Visit Example</a>
- Example:
-
Images:
<img>: Defines an image. Thesrcattribute specifies the source of the image, andaltprovides alternative text for an image if the user for some reason cannot view it.- Example:
<img src="image.jpg" alt="Description of the image">
- Example:
-
Lists:
<ul>: Defines an unordered (bulleted) list.<ol>: Defines an ordered (numbered) list.<li>: Defines a list item.
Here's a simple example combining some of these elements:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p><strong>Strong text.</strong> <em>Emphasized text.</em></p>
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of the image">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>