Basic structure of an HTML document

HTML

About Lesson

Basic structure of an HTML document

An HTML document has a basic structure that includes the following components:

<!DOCTYPE html>: This declaration is the first line of an HTML document, and it tells the web browser which version of HTML the document is written in. In HTML5, the declaration is simply <!DOCTYPE html>.
<html>: This tag indicates the beginning of the HTML document.
<head>: This tag contains information about the document that is not displayed on the web page itself, such as the title of the page, links to external style sheets, and metadata.
<title>: This tag is nested inside the <head> tag and contains the title of the web page, which is displayed in the browser’s title bar and search engine results.
<body>: This tag contains all the visible content of the web page, such as text, images, links, and other media.

Here is an example of a basic HTML document with all of its components:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a paragraph of text.</p>

<a href=”https://www.example.com”>Visit Example.com</a>

</body>

</html>

HTML syntax and semantics

HTML syntax is based on a set of rules for structuring and organizing content on a web page. HTML tags are used to create the structure of the document, and each tag is enclosed in angle brackets (< and >). Some tags require additional attributes that provide information about the content, such as src for an image tag or href for a link tag.

The basic syntax for an HTML tag is as follows:

<tagname attribute1=”value1″ attribute2=”value2″>Content goes here</tagname>

For example, the following code creates a paragraph of text:

<p>This is a paragraph of text.</p>

HTML semantics refers to the meaning and purpose of the content on a web page. HTML5 introduced several new semantic tags that allow developers to describe the structure and meaning of content in a more meaningful way. For example, instead of using a generic div tag to group content, HTML5 introduced tags such as header, nav, section, article, and footer that provide more semantic information about the content.

Here are some examples of HTML5 semantic tags:

<header>: Defines a header for a web page or section.
<nav>: Defines a set of navigation links for a web page.
<section>: Defines a section of a web page.
<article>: Defines an article on a web page.
<footer>: Defines a footer for a web page or section.

Using semantic tags can help search engines and other tools better understand the structure and meaning of content on a web page, which can improve accessibility and search engine optimization.

Related