Rashi Chouksey

January 5, 2022
  • The <!DOCTYPE html> declaration must be placed in the beginning of every HTML document: it informs the browser about the document type.
  •  The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect.
  • Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly.
  • While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules.
  • In HTML 5, the declaration is simple:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Doctype in Older Versions of HTML

  • Versions prior to HTML5 were based on Standard Generalized Markup Language (SGML), so their !doctype declaration had to contain a reference to their corresponding document type declaration (DTD). This also meant saving the DTD declaration and having separate ones for strict and transitional modes.

HTML <!DOCTYPE html>: Useful Tips

  • If you skip the HTML5 doctype declaration, the system will add it automatically when you run the website. This did not work with older versions of HTML.
  • The DTD for every HTML version can be found in its official specification (e.g.,you can see the DTD for HTML 4.01)
  • DTD defines the rules for the markup languages so that the browsers recognize the content correctly.

                HTML <meta> Tag

  • The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
  • <meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
  • Metadata will not be displayed on the page, but is machine parsable.
  • Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
  • There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag (See “Setting The Viewport” example below).

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Meta Charset –

The charset attribute specifies the character encoding for the HTML document.

  • charset is an HTML attribute that defines the character encoding for your browser to use when displaying the website content.
  • utf-8 is a specific character encoding.

In other words, <meta charset=”utf-8″> tells the browser to use the utf-8 character encoding when translating machine code into human-readable text and vice versa to be displayed in the browser.

<head>
<meta charset="UTF-8">
</head>

Why ‘utf-8’?

Today, more than 90% of all websites use UTF-8. Before TF-8 became the standard, ASCII was used. Unfortunately, ASCII only encodes English characters, so if you used other languages whose alphabet does not consist of English characters, the text wouldn’t be properly displayed on your screen.

Understanding the X-UA-Compatible meta tag-

lots of web pages are using the <meta http-equiv=’X-UA-Compatible’ content=’IE=edge,chrome=1? /> 

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.Here are your options:

  1. “IE=edge”
  2. “IE=9”
  3. “IE=EmulateIE94
  4. “IE=8”
  5. “IE=EmulateIE8”
  6. “IE=7”
  7. “IE=EmulateIE7”
  8. “IE=5

                           The Viewport

The viewport is the user’s visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

A Browser’s viewport is the area of web page in which the content is visible to the user. The viewport does not have the same size, it varies with the variation in screen size of the devices on which the website is visible. For a laptop, the viewport has a larger size as compared to a smartphone or tablet.

The meta tag should be added in the head tag in HTML document.

A Responsive tags has the following attributed:

  • width: Width of the virtual viewport of the device.
  • height: Height of the virtual viewport of the device.
  • initial-scale: Zoom level when the page is first visited.
  • minimum-scale: Minimum zoom level to which a user can zoom the page.
  • maximum-scale: Maximum zoom level to which a user can zoom the page.
  • user-scalable: Flag which allows the device to zoom in or out.

It gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 Using the HTML lang attribute

The lang attribute specifies the language of the element’s content.

Common examples are “en” for English, “es” for Spanish, “fr” for French and so on

The lang attribute specifies which language is used to write the content of a web page. It is used to set the language for the whole text of the web page.

The lang attribute is a Global Attribute, and can be used on any HTML element.

Share

You may also like...