Welcome to the basics of HTML, the fundamental building block of the web. Here you'll learn the essentials to start creating your own web pages.

What is HTML?

HTML (Hypertext Markup Language) is a markup language used to create the structure and content of web pages. It is written in plain text and is interpreted by web browsers.

Basic Structure

Here is the basic structure of an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>

</body>
</html>
  • <html>: The root element of an HTML page.
  • <head>: Contains meta-information about the document, like the title.
  • <title>: The title of the document, which appears in the browser's title bar or tab.
  • <body>: Contains the content of the document, like text, images, links, etc.
  • <h1>: A top-level heading.
  • <p>: A paragraph.

Elements and Attributes

HTML elements are tags that define the structure of a document. They are surrounded by angle brackets < >. For example, <h1> is an element.

Attributes provide additional information about an element. For example, the href attribute in the <a> (anchor) element is used to define the link's destination.

Here is an example of an element with an attribute:

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

The <a> element creates a hyperlink, and the href attribute specifies the URL of the page you want to link to.

Text Formatting

HTML provides elements to format text, such as bold (<strong>) and italic (<em>):

<strong>This is bold text.</strong>
<em>This is italic text.</em>

Images

You can add images to your web pages using the <img> element:

<img src="image.jpg" alt="Descriptive text">

The src attribute specifies the source of the image, and the alt attribute provides a text alternative if the image cannot be displayed.

Lists

HTML supports two types of lists: ordered (<ol>) and unordered (<ul>):

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Tables

Tables are used to organize data:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

The <table>, <tr>, <th>, and <td> elements are used to create a table, rows, headers, and cells, respectively.

Hyperlinks

Hyperlinks are used to link to other pages or resources. The <a> element is used for this purpose:

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

The href attribute specifies the URL of the page you want to link to.

Next Steps

For more information, visit our HTML Tutorial.

Remember, HTML is a powerful tool, but it's also a learning process. Don't be afraid to experiment and learn as you go!