Logo
Basic HTML Tutorial
Back to Articles

Basic HTML Tutorial

cssdesign

PPhat DEv

11 months ago

Basic HTML Tutorials

Welcome! This tutorial will introduce you to the basics of HTML (HyperText Markup Language), the standard markup language for creating web pages.


Table of Contents

  1. What is HTML?
  2. HTML Document Structure
  3. Common HTML Tags
  4. Creating Links and Images
  5. Lists in HTML
  6. Adding Comments
  7. Conclusion

What is HTML?

HTML stands for HyperText Markup Language. It is used to create the structure of web pages using elements called "tags."


HTML Document Structure

Every HTML document has a basic structure:

typescript
<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Explanation:

  • <!DOCTYPE html>: Tells the browser this is an HTML5 document.
  • <html>: Root element.
  • <head>: Contains meta information (not shown on the page).
  • <title>: Sets the page title in the browser tab.
  • <body>: Contains visible content.

Common HTML Tags

Here are some essential HTML tags:

TagDescriptionExample<h1><h6>Headings (largest to smallest)<h1>Hello</h1><p>Paragraph<p>This is a paragraph.</p><strong>Bold text<strong>Important</strong><em>Italic text<em>Emphasized</em><br>Line breakFirst line<br>Second line<hr>Horizontal rule (line)<hr>


Creating Links and Images

Links

To link to another page, use the <a> tag:

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

Images

To display an image, use the <img> tag:

typescript
<img src="https://www.example.com/image.jpg" alt="Description">
  • src: Image URL or file path.
  • alt: Alternative text for screen readers.

Lists in HTML

Unordered List

typescript
<ul>
  <li>Item One</li>
  <li>Item Two</li>
</ul>

Ordered List

typescript
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Adding Comments

Comments are not displayed in the browser. They are useful for notes in your code:

typescript
<!-- This is a comment -->

Conclusion

This covers the basics of HTML! To learn more, explore resources like:

Happy coding!

#css#design