The basic HTML of every webpage

by

A standard HTML webpage consists of a basic framework of tags that tell the browser how to structure and display the content.

  • The HTML code makes the page possible in the first place.
  • It is the foundation of every single page.
  • It can be analogously considered as the skeleton in the body.

Example code of a simple HTML webpage

  • Copy this text into a simple text file and save it with the .html extension.
  • You can see the result when you open the file in the browser of your choice.
  • The HTML syntax is very clear and therefore quick to learn.
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to my Website</h1>
    <p>This is a paragraph with some text.</p>
</body>
</html>

Explanation of the individual terms

<!DOCTYPE html>
  • This tag defines the document type and HTML version.
  • It stands for HTML5, the current version in 2024, and tells the browser that it is an HTML5 document.
<html lang="de">
  • <html> is the root element of an HTML page. It tells the browser how to interpret the upcoming code.
  • The lang attribute specifies the language of the content, in this case, German (de).
<head>
  • The <head> area contains tags that hold information about the HTML document but are not directly displayed in the webpage content.
  • These include metadata, the page title, and references to external files like CSS stylesheets.
<meta charset="UTF-8">
  • This tag defines the character encoding for the document, in this case, UTF-8. It ensures that all characters are displayed correctly.
<title>My First Website</title>
  • Specifies the title of the webpage, which is displayed in the browser’s title bar or in search results.
<body>
  • The <body> area contains the visible content of the webpage, such as texts, images, links, tables, etc.
<h1>Welcome to my website</h1>
  • A heading tag that displays the most important heading on the page.
  • <h1> is used for the main heading, followed by <h2> to <h6> for subordinate headings.
<p>This is a paragraph with some text.</p>
  • Defines a paragraph.
  • The <p> tag is used to structure blocks of text.

Conclusion

  • The elements covered here form the basic framework of almost every webpage.
  • Of course, a real webpage can be much more complex, with many additional tags and embedded resources like images, videos, scripts, and stylesheets.

Leave a Comment