DEV Community

Alex Gonzalez
Alex Gonzalez

Posted on • Edited on

Introduction to HTML: The HyperText Markup Language

HTML, or HyperText Markup Language, is the standard language used for creating web pages. As a markup language, it provides the structure and layout of a web page, defining elements like headings, paragraphs, links, and more. From simple static websites to complex interactive web applications, HTML is the foundation upon which much of the internet is built.

What is HTML?

HTML is a markup language that uses a series of tags to define the structure and content of a web page. These tags, written within angle brackets < >, are interpreted by web browsers to render the content correctly on the user's screen, and are used to create elements like headers (represented by <h1> through <h6> tags), paragraphs (<p>), links (<a>), or images (<img>), among others.

The basic structure of an HTML document:

Every HTML document follows a basic structure consisting of a set of key elements:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is an example of a heading.</h1>
    <p>This is an example of a paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • <!DOCTYPE html>: This declaration defines the HTML version used in the document. (In this case, HTML5).
  • <html>: It is the root element that wraps all HTML content.
  • <head>: It contains metadata about the document, such as the page title and links to CSS style sheets and JavaScript scripts.
  • <title>: Defines the title of the page displayed in the browser’s tab.
  • <body>: Contains the visible content of the page, such as headers, paragraphs, images, and more.

Key HTML Tags:

  • Headers (<h1> ,…,<h6>): Used to organize and hierarchize page content.
  • Paragraphs (<p>): Defines a block of text.
  • Links (<a>): Creates an hyperlink to other web pages or online resources.
  • Images (<img>): Inserts an image into the page.
  • Lists (<ul>,<ol>): Creates an unordered or ordered list.
    • List item (<li>): Defines a list item.
  • Tables (<table>): Organizes data into a tables.
    • Table row (<tr>):Defines a table row.
    • Table column (<td>): Defines a table column.
  • Forms (<form>): Creates a form to collect user information.
    • Input (<input>): Defines an input that can be filled with some information.
    • Button (<button>): Defines a button that can be pressed to send the form information.

For more information about HTML tags: https://html5doctor.com/element-index/

Moving forward with HTML

To create dynamic and visually appealing web pages, it's necessary to complement it with CSS (Cascading Style Sheets) for styling the content and JavaScript for adding interactivity and functionality. Together, these three languages form the core of modern web programming.

Top comments (0)