Introduction to HTML

#webdev #beginners #tutorial #html

HTML HyperText Markup Language is the standard language used to create web pages. It provides the structure of a webpage and allows developers to include various elements like text, images, links, and more. HTML elements are the building blocks of web pages, and they define the content and structure of the document.

Basic Structure of an HTML Document

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Sudhanshu Developer Page.</title>
</head>
<body>
  <h1>Welcome to Sudhanshu Developer</h1>
  <p>This is a Paragraph of text.</p>
</body>
</html>

Key HTML Elements

The <html> element is the root element of an HTML document. All other elements are nested within this element.

<!DOCTYPE html>
<html>
  <!-- Document content goes here -->
</html>

The <head> element contains meta-information about the document, such as its title and links to scripts and stylesheets.

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Sudhanshu Developer Page.</title>
</head>
<body>
  <!-- Body content goes here -->
</body>
</html>

The <title>element sets the title of the webpage, which appears in the browser tab.

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Sudhanshu Developer Page.</title>
</head>
<body>
</body>
</html>

The <link> element links external resources, like stylesheets, to the HTML document.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <title>Welcome to Sudhanshu Developer Page.</title>
</head>
<body>
</body>
</html>

The <script> element embeds or references JavaScript code.

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Sudhanshu Developer Page.</title>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

The <body> element contains the content of the HTML document, such as text, images, and other elements.

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Sudhanshu Developer Page.</title>
</head>
<body>
  <h1>Welcome to Sudhanshu Developer Page.</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

Example:

First Create an index.html file and write the basic code, open this file in Google Chrome and any browser.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Welcome to Sudhanshu Developer Blog..!</title>
  </head>

  <body>
    <h1>Welcome to Sudhanshu Developer Blog..!</h1>
    <p>It is a basic HTML page </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Output:

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →