DEV Community

Cover image for Introduction to HTML
Sudhanshu Gaikwad
Sudhanshu Gaikwad

Posted on

Introduction to HTML

#html #webdev #beginners #tutorial

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Output:

Top comments (0)