In this section, you will learn some basic HTML examples.
1. <!DOCTYPE html>
2. <!-- My First HTML Example -->
3. <html>
4. <head>
5. <meta charset = "utf-8">
6. <title> My Web Page Title </title>
7. </head>
8. <body>
9. <h1> Your first heading here. </h1>
10. <p> Your paragraph here. </p>
11. </body>
12. </html>The above HTML code explanation is described below:
Document Type Declaration
The document type declaration (DOCTYPE) in line 1 is required in HTML documents so that browsers render the page in standards mode, according to the HTML and CSS specifications.
Some browsers operate in quirks mode to maintain backward compatibility with web pages that are not up-to-date with the latest standards. You’ll include the DOCTYPE in each HTML document you create.
Comments
Line 2 are HTML comments. You’ll insert comments in your HTML markup to improve readability and describe the content of a document. The browser ignores comments when your document is rendered. HTML comments start with <!– and end with –>.
html, head and body Elements
HTML markup contains text (and images, graphics, animations, audios and videos) that represents the content of a document and elements that specify a document’s structure and meaning. Some important elements are the html element (which starts in line 3 and ends
in line 12), the head element (lines 4–7) and the body element (lines 8–11).
The html element encloses the head section (represented by the head element) and the body section (represented by the body element). The head section contains information about the HTML document, such as the character set (UTF-8, the most popular character-encoding scheme for the web) that the page uses (line 5)—which helps the browser determine how to render the content—and the title (line 6).
Start Tags and End Tags
HTML documents delimit most elements with a start tag and an end tag. A start tag consists of the element name in angle brackets (for example, <html> in line 3). An end tag consists of the element name preceded by a forward slash (/) in angle brackets (for example </html> in line 12). There are several so-called “void elements” that do not have end tags.
As you’ll soon see, many start tags have attributes that provide additional information about an element, which browsers use to determine how to process the element. Each attribute has a name and a value separated by an equals sign (=).
title Element
Line 6 specifies a title element. This is called a nested element, because it’s enclosed in the head element’s start and end tags. The head element is also a nested element, because it’s enclosed in the html element’s start and end tags. The title element describes the web page. Titles usually appear in the title bar at the top of the browser window, in the browser tab on which the page is displayed, and also as the text identifying a page when users add the page to their list of Favorites or Bookmarks, enabling them to return to their favorite sites. Search engines use the title for indexing purposes and when displaying results.
Line 8 begins the document’s body element, which specifies the document’s content, which may include text, images, audios and videos.
Paragraph Element (<p> . . . </p>)
Some elements, such as the paragraph element denoted with <p> and </p> in line 10, help define the structure of a document. All the text placed between the <p> and </p> tags forms one paragraph. When a browser renders a paragraph, it places extra space above and below the paragraph text. The key line in the program is line 10, which tells the browser to display Your paragraph here..
End Tags
This document ends with two end tags (lines 11–12), which close the body and html elements, respectively. The </html> tag informs the browser that the HTML markup is complete.