HTML, or HyperText Markup Language, is the standard language used to create web pages. It forms the backbone of every website and allows you to structure your content with elements like headings, paragraphs, links, and images. Let’s look deeper into the basics of HTML to help you get started.
What is HTML?
HTML stands for HyperText Markup Language. It is used to create and structure content on the web. HTML consists of a series of elements, which you can use to enclose or wrap different parts of the content to make it appear or act in a certain way.
Basic Structure of an HTML Document
An HTML document has a basic structure, which includes a doctype declaration, <html> element, <head> element, and <body> element. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page.</p>
</body>
</html>In this example, the doctype declaration <!DOCTYPE html> tells the browser that this is an HTML5 document. The <html> element is the root element of the document. The <head> element contains meta-information about the document, and the <body> element contains the content of the web page.
Common HTML Elements
Headings
Headings are used to define different levels of section titles. HTML has six levels of headings, from <h1> to <h6>, with <h1> being the highest level:
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>Paragraphs
Paragraphs are used to define blocks of text. Use the <p> element to create a paragraph:
<p>This is a paragraph.</p>Links
Links are used to navigate from one web page to another. Use the <a> element to create a link:
<a href="https://www.example.com">Visit Example</a>In this example, href attribute specifies the URL of the page the link goes to.
Images
Images are used to embed pictures in your web page. Use the <img> element to add an image:
<img src="image.jpg" alt="Description of image">The src attribute specifies the path to the image, and the alt attribute provides alternative text if the image cannot be displayed.
Lists
Lists are used to group related items. There are two types of lists in HTML: ordered lists and unordered lists.
Ordered lists use numbers:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>Unordered lists use bullets:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Attributes
HTML elements can have attributes, which provide additional information about the element. 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 in new tab</a>In this example, the target attribute with the value _blank tells the browser to open the link in a new tab.
Forms
Forms are used to collect user input. Use the <form> element to create a form:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</form>In this example, the action attribute specifies where to send the form data when the form is submitted, and the method attribute specifies how to send the form data (in this case, using the HTTP POST method).
Conclusion
HTML is the foundation of web development. By understanding and using HTML, you can create and structure web pages. As you get more comfortable with HTML, you can start exploring CSS and JavaScript to make your web pages more interactive and visually appealing.