HTML Syntax for Beginners: How it Works with Examples

HTML syntax shows how tags and attributes go together. It gives browsers the rules to read and display a page. The code must follow these rules to work without errors. A missing or misplaced tag can stop the page from loading properly.

Required Document Structure in HTML Syntax

HTML needs a fixed structure. It always starts with a doctype. Then it has <html> as the root. Inside it you can add <head> and <body>.

• Doctype: The first line that tells the browser to read HTML5.
• html: The root that holds all content.
• head: It holds page data like title and meta.
• body: It holds what the user sees on the page.

Tags must appear in the correct order. You close them in the reverse order you opened them. One tag cannot cross into another. Wrong order breaks how the page shows. A closing tag marks where the element stops.

Examples for Syntax in HTML

Minimal Page:

<!DOCTYPE html>
<html>
  <head>
    <title>This is the page title</title>
  </head>
  <body>
    <p>You can add some text inside this paragraph</p>
  </body>
</html>

This example is the smallest page that still counts as valid. It starts with the doctype, then uses the HTML, head, and body tags. Inside the body, a paragraph tag holds a message.

List Inside Body:

<!DOCTYPE html>
<html>
  <head>
    <title>List Example</title>
  </head>
  <body>
    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Banana</li>
    </ul>
    </body>
</html>

This code shows you how lists work inside the body.

Link with Image:

<!DOCTYPE html>
<html>
  <head>
    <title>Image Link</title>
  </head>
  <body>
    <a href="https://example.com">
      <img src="photo.jpg" alt="Photo">
    </a>
  </body>
</html>

This sample shows you how to place an image inside a link. The anchor wraps the image, and you can click the picture to visit the target page.

Simple Form:

<!DOCTYPE html>
<html>
  <head>
    <title>This is the title tag</title>
  </head>
  <body>
    <form action="/submit" method="post">
      <label>Name:</label>
      <input type="text" name="user">
      <input type="submit" value="Send">
    </form>
  </body>
</html>

This code builds a small form. It has a text field and a submit button. The form sends user data to the server by the POST method.

Wrapping Up

You learned what HTML syntax means and how the basic structure works. Here is a quick recap:

• Doctype sets the HTML version.
• HTML is the root.
• The head tag holds page data.
• The body tag shows page content.
• Tags must nest and close in the right order.

FAQs

<p>Hello <strong>world</p></strong>

<p>Hello <strong>world</strong></p>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> <h1>Hello</h1> </body> </html>

Similar Reads