Web Development Tutorials

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

Think of HTML as the bones of a webpage. It defines the content and its arrangement, providing a foundation for everything else you see on the internet.

The Basic Structure of an HTML Document

Every HTML page has a basic structure that all browsers recognize. This structure is defined by a few key tags:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>
  • <!DOCTYPE html>: Declares the document type and HTML version.
  • <html>: The root element of an HTML page.
  • <head>: Contains meta-information about the HTML document, like the title, character set, and links to stylesheets.
  • <body>: Contains the visible page content.

HTML Elements and Tags

HTML elements are the building blocks of HTML pages. An HTML element is defined by a start tag, content, and an end tag. For example:

<p>This is a paragraph.</p>
  • <p> is the start tag.
  • This is a paragraph. is the content.
  • </p> is the end tag.

Some HTML elements have no content, like the empty tag <br> (line break).

HTML Attributes

HTML attributes provide additional information about an HTML element. Attributes are always specified in the start tag and usually come in name/value pairs like name="value".

For example, the <a> tag (anchor) is used to create hyperlinks. The href attribute specifies the URL of the page the link goes to:

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

Another common attribute is src for images, which specifies the path to the image file:

<img src="image.jpg" alt="A descriptive text">

The alt attribute is crucial for accessibility, providing alternative text for screen readers or if the image fails to load.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Sub-subsection Title</h4>
<h5>Even Smaller Title</h5>
<h6>Smallest Title</h6>

HTML Paragraphs

The HTML <p> tag defines a paragraph. Browsers automatically add some space (a margin) before and after each paragraph.

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

HTML Images

HTML images are defined using the <img> tag. Images are not embedded in the HTML page directly. Instead, the <img> tag links to an external resource using the src attribute. The alt attribute provides alternative text.

<img src="images/my_photo.jpg" alt="A picture of me">

You can also specify width and height using attributes, though it's generally better to control these with CSS:

<img src="images/logo.png" alt="Company Logo" width="100" height="50">

HTML Lists

HTML lists are used to present a list of items. There are two main types of lists:

Unordered Lists (<ul>)

Items are marked with bullets:

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

Ordered Lists (<ol>)

Items are marked with numbers or letters:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Next Steps

You've learned the very basics of HTML! Understanding these core elements and tags will allow you to start building simple web pages. The next logical step is to explore CSS (Cascading Style Sheets) to learn how to style your HTML and make your web pages visually appealing. Then, dive into JavaScript to add interactivity and dynamic behavior.

Keep practicing by building your own simple pages! Experiment with different tags and attributes.

Ready to learn more? Check out our tutorials on CSS Basics.