Basic HTML

Home / Topic / Basic HTML / Introduction to HTML

Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure of a web page and allows the inclusion of elements such as text, images, links, and other multimedia resources. HTML is fundamental for web development and is interpreted by browsers to visually display content to users.

Visual representation of a simple HTML page with different elements marked, such as text and links Visual representation of a simple HTML page with different elements marked, such as text and links

Structure of an HTML Document

An HTML document has a basic structure recognized by all browsers. This structure defines how content and metadata are organized on the page. Below is an example of a basic structure:

html

"The structure begins with the document type, followed by the html tag that encloses all content. The header includes the page title and metadata. Then, in the body, we can include visible elements like headings and paragraphs."

Overview of Tags and Elements

In HTML, we use tags to define different types of content. Each tag is delimited by angle brackets, like <p> for a paragraph or <h1> for a heading. Tags usually come in pairs, such as <p> and </p>, although some are self-closing tags.

Example of different basic tags:

html

"Here we see a heading, a couple of paragraphs, and a horizontal line. Each tag has a specific purpose, the heading highlights the title, and the paragraphs group blocks of text."

Visualization of different tags and their effects in an HTML page Visualization of different tags and their effects in an HTML page

Basic Structure of the Document

DOCTYPE Declaration

The HTML document begins with <!DOCTYPE html>, a declaration that informs the browser of the document type and the version of HTML we are using. This is an important step to ensure the document is rendered correctly.

html

"Doctype is the first line and ensures the browser interprets the document as HTML5. It does not have a closing tag and is essential in any modern HTML page."

The `<html>` Tag

The <html> tag wraps all the page content. Here we also define the document's language using the lang attribute.

html

"The html tag contains all the content of the page. The lang attribute specifies the language, in this case, English."

`<head>` Section

Inside the <head> tag, we include information about the document, such as the title, metadata, and links to styles and scripts. This information is not directly displayed on the page but is crucial for the functionality and accessibility of the site.

html

"The header includes the page title, which will appear on the browser tab, and also metadata like the character set, which helps display text correctly."

`<body>` Section

The <body> tag contains the visible content of the page. This is where we place the text, images, links, and other elements that we want the user to see.

html

"The body contains the content that the user will see on the page. In this case, we see a heading and a welcome paragraph."

Chapter Conclusion

Now that you understand the basic structure of an HTML document, you are ready to explore the different content elements you can add to your pages. In the next chapter, we will learn how to work with text and the different tags that allow us to format it.

Mark as read and continue