Introduction
HTML is generally used to describe the structure of a web page. An HTML document is essentially a series of nested elements that work together to form a complete webpage. Every HTML document follows a standard structure—typically including <!DOCTYPE html>, <html>, <head>, and <body> tags—to ensure consistency across different browsers. Understanding the structure and components of an HTML document is fundamental to effective web development.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>My first Heading</h1>
<p>My first Paragraph</p>
</body>
</html>
Result
Note: The browser doesn’t display the html tags, but uses them to determine how to display the document.
Explained Example
- The <!DOCTYPE html> helps to define that the document is an HTML5 document.
- The <html> element is the base element of an HTML page
- The <head> element contains the meta information about the HTML page, such as the links to CSS and JavaScript files, title, and other meta information. Examples of <head> element include:
- <Title>: Defines the title of the html page, which is displayed in the browser’s title bar.
- <meta>: Provides metadata like charset, name/description and viewpoint settings for responsive design.
- <link>: Links external resources like stylesheet (CSS) or favicons.
- The <body> element defines the document’s body which contains the content, such as list, paragraph, table, input, Iframe, img, label, fieldset, legend, button, audio, headings, etc.
The <meta> tag
The <meta> tag represents metadata that can’t be represented by other meta-related elements, such as <title>, <link>, or <style>.
Common Meta Tags:
<meta charset=”UTF-8”>
If the charset attribute is set, it is giving the character encoding in which the document is encoded by the <meta> tag, and it is often set to UTF-8 to support a wide range of charters.
<meta name=”viewpoint” content=”……….”>
If the name attribute is set, it controls the viewpoint settings for responsive design and document-level metadata that applies to the whole web page.
<meta http-equiv=”refresh” content=”5”>
If the http-equiv attribute is set, it is the closest thing to a pragma directive in html. Indicates that the meta element is a pragma directive that specifies either a number of seconds after which to reload the current page. Then the content=”refresh value” specifies the number of seconds after which to reload the current page.
