Tutorials

HTML Basic

Posted in HTML Tutorial

Updated on Sep 13, 2024

By Mari Selvan

👁️ 57 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

Introduction

HTML (HyperText Markup Language) is the foundation of web development, used to structure content on the web. It allows you to create web pages by defining elements like headings, paragraphs, links, images, and more.

Understanding HTML is essential for anyone interested in web development, as it forms the backbone of every website.

What Is HTML?

HTML is a markup language used to create web pages. It uses tags to structure text, multimedia, and other elements on a page. HTML documents are interpreted by web browsers, which render the content for users to see.

Basic HTML Document Structure

An HTML document consists of elements that form the structure of a webpage. Here’s the basic layout:

HTML

Copied

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>: Declares the document type as HTML5.
<html>: The root element of the document.
<head>: Contains meta-information like the title and links to stylesheets.
<body>: Contains the content visible to users, such as text, images, and links.

HTML Elements and Tags

HTML uses tags to define elements. Most elements have an opening tag (e.g., <p>) and a closing tag (e.g., </p>). The content goes between the opening and closing tags.

Some elements, such as <img> and <br>, are self-closing and don’t require a closing tag.

Attributes in HTML

Attributes provide additional information about an element and are included in the opening tag. For example, the src attribute in an <img> tag specifies the image source:

src: Specifies the URL of the image.
alt: Provides alternative text for accessibility.

Common HTML Tags

Here are some common HTML tags you’ll use frequently:

Headings:

<h1> to <h6> for different heading levels.
HTML
Copied
```
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
Paragraphs:

<p> for paragraphs of text.
HTML
Copied
```
<p>This is a paragraph of text.</p>
```
Lists:

<ul> for unordered lists, <ol> for ordered lists, and <li> for list items.
HTML
Copied
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```
Divisions and Spans:

<div> for block-level elements, <span> for inline elements.
HTML
Copied
```
<div>This is a block of content.</div>
<span>This is inline text.</span>
```

HTML Links and Images

Links and images are integral to any web page. Use the <a> tag to create hyperlinks and the <img> tag to display images.

Link:

Creates a clickable link.

HTML

Copied

<a href="https://example.com">Visit Example</a>

Image:

Embeds an image in the page.

HTML

Copied

<img src="image.jpg" alt="An example image">

Best Practices

Use Semantic HTML: Tags should represent their content meaningfully (e.g., use <header>, <footer>, <article>).
Validate Your HTML: Ensure that your HTML is properly structured by using tools like the W3C Markup Validator.
Accessibility: Always provide alternative text (alt) for images and consider using ARIA roles for enhanced accessibility.
Keep it Clean: Use comments () and indentation for better readability and maintainability of your HTML code.

Example

Here’s a simple HTML example demonstrating the basic structure of a webpage:

HTML

Copied

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a basic HTML example.</p>

  <h2>Things I Like:</h2>
  <ul>
    <li>Coding</li>
    <li>Web Development</li>
    <li>Coffee</li>
  </ul>

  <p>Visit my <a href="https://example.com">website</a> for more information.</p>
</body>
</html>

Conclusion

HTML is the foundation of web development, providing the structure and layout for web pages. Mastering basic HTML tags and their attributes is the first step toward becoming a web developer. Once comfortable with HTML, you can dive deeper into styling with CSS and adding interactivity with JavaScript.