DEV Community: iteachfrontend

What Is Inside HTML Head Element?

iteachfrontend — Tue, 04 Feb 2020 17:01:36 +0000

HTML <head> element represents a collection of metadata for the current document. This information helps the browser in understanding the document and displays it properly on the user device.

Lets, take below example and understand each and every element that is a child of <head> element

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="https://iteachfrontend.com/">
  <title>I Teach Frontend</title>
  <link rel="shortcut icon" href="/favicon.ico" />

  <!-- external style sheets -->
  <link rel="stylesheet" href="style.css" />

  <!-- inline style sheets -->
  <style>body{margin:0}</style>

  <!-- scripts -->
  <script>function example(){}</script>
</head>
...
</html>

meta provides a generic list of metadata values such as search keywords, viewport properties, and the file’s character encoding
The first line you declare inside the head i.e. <meta charset="utf-8"> is the charset declaration. The charset attribute specifies the character encoding used by the document. A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified.
base specifies the document base URL for use with resolving relative hypertext links. A base element must have an href attribute, a target attribute, or both where href attribute is a valid URL and target attribute is valid browsing content. A valid browsing context is one of: _blank, _self, _parent, or _top. In the above example, we have set the base URL to https://iteachfrontend.com/
title element represents the document title or name. In this case, the title is I Teach Frontend. This information is displayed sometimes on the browser tab. So if you have multiple tabs open, and you want to switch to some particular tab you can do so by first reading the title in the browser tab. Page title is also helpful when the user bookmarks page or search previously visited page in browser history. The title is unique to a page so there must be not more than one title element per document.
link element refers to an external resource that the document is connected to. A link could be external stylesheets, site icons, scripts, fonts and other documents of the website. Each link specifies the relationship using the attribute rel - the value denotes how the item being linked to is related to the current document. In above example, line: <link rel="stylesheet" href="style.css" /> - the style.css is having relationship of stylesheet.
script element refers to an inline script or link to external scripts. If the script tag is having href attribute the body content is ignored by the browser. The code defined inside the script tag could be executed on the current document
style element refers to an inline style or link to external stylesheets. The ongoing trend is to have a combined minified style embedded within head tag to avoid loading one extra external resource - this also helps in increasing the overall performance of the webpage.

There are a lot of ways how link and meta tags can be combined with other attributes to handle underlying element differently by browsers, however, that has been purposefully omitted to keep the content of post simple

Refrences

👉Link to the original article

Creating First HTML Document

iteachfrontend — Mon, 03 Feb 2020 16:09:38 +0000

HTML is the language used to create web pages. An HTML document is composed of multiple elements that help browsers in understanding the document structure and layout content on the user screen.

In general, the structure of an HTML document is like a tree. As the tree has multiple branches and new branches could extend from the current branch similarily elements in an HTML document could be next to each other or nested inside another element.

Element tags

Before, we deep dive into the HTML document structure, we should understand the fundamental building block in every HTML document is the element tag, which marks an element in the document. A starting tag indicates the beginning of that element, while an ending tag indicates the ending. The general syntax of a two-sided element tag is <element>content</element> where element is the name of the element, content is the element’s content, <element> is the starting tag, and </element> is the ending tag. For example, the following code marks a paragraph element:

<p>This is a pragraph</p>

<p> in the above example is starting tag and </p> is the ending tag.

In addition to a two-sided element tag, we also have one-sided element tag also known as empty elements. These elements are either used for non-textual content such as images or contain directives to the browser about how the page should be treated. For example, the following code marks an image element

<img src="/path/to/image.jpg" alt="my image" />

Another, example for one-sided element is <br/> element that is used to put a line break between content

Keys points to remember about element tags

Not every element tag enclose document content
Some elements do not have the ending tag
An element tag can have other element tags also known as a nested element. Nested elements should close first before closing its immediate parent element tag

Lets understand the structure of HTML document

Now, we have a basic understanding of what element tag lets explore how these elements tags help us in creating a complete HTML document

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My First HTML page</title>
  </head>
  <body>
    <h1>Big Heading</h1>
    <p>I am text inside a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>: The very first line of HTML document should start with the doctype declaration. The doctype appears just above <html> tag, at the very start of each HTML document, which is a processing instruction indicating the markup language used in the document. The declaration is used in HTML5 to distinguish between a standards-compliant parsing mode and so-called quirks parsing mode.
<html>: The root element of HTML document. head and body are the only valid children of the html element. lang="en-US" is an attribute of html element and is used to set the primary language of the document.
<head>: The head section of HTML document is not displayed in the web browser however, it contains important meta-information about the document such as the page title, links to CSS and JavaScript files, keywords and description that help search engine to display relevant content, on user search. The <meta>, <title>, <link>, <script> and <style> are valid elements that could be nested inside the <head> element. In the above example, we have two child elements - first is <meta charset="utf-8"> and second is <title>My First HTML page</title>
<body>: The visible content on the page is defined inside <body> tag. Headings, paragraphs, images, links, videos, audio content, etc. are all defined inside the body element. Within the <body> element of this file, we have a high-level heading <h1> and a paragraph <p>.

Helpful links

https://validator.w3.org - To check the HTML markup of Web documents is valid

👉Link to the original article

Character Encoding Of HTML Document

iteachfrontend — Sun, 02 Feb 2020 16:00:17 +0000

The first line you need inside the head i.e. <meta charset="utf-8"> is the charset declaration. The charset attribute specifies the character encoding used by the document. A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified. It is extremely important to declare character encoding just after starting <head> tag before any element that contains text, such as <title> element and, with in the first 1024 bytes of the document, failing to do so will cause browsers to guess the encoding.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">

      <!--  rest of document -->
      ...
</html>

Is it mandatory to specify character encoding?

Although it is not mandatory however it is a good practice to specify this information explicitly.

If you do not specify <meta charset="utf-8"> in the HEAD of the HTML document, the browser will look for the Content-Type response HTTP header sent from the server.

What is `UTF-8`?

UTF-8 (case insensitive) is a character encoding capable of encoding all possible characters (called code points) in Unicode. The encoding is variable-length and uses 8-bit code units.

Unicode provides a unique number for every character

As of HTML5 the recommended charset is UTF-8.

Summary

Choosing the right character encoding is important. Use UTF-8 if at all possible, especially for multilingual sites.

👉Link to the original article

What Are Browser Vendor Prefixes?

iteachfrontend — Sun, 26 Jan 2020 17:11:58 +0000

Browser vendors introduce experimental features or nonstandard CSS properties into their browsers. They do this by prefixing property names with strings that are recognized by their browser engine. When the browser scans the document and finds CSS property prefixed with the string known to the underlying engine it applies it to the current document otherwise it ignores the property. This allows browser vendors to introduce new features while the specifications are missing or immature.

CSS Vendor Prefixes

-webkit- Those starting with -webkit- apply to WebKit-based browsers such as Chrome, Safari, latest Opera, iOS browsers(which also includes Firefox for iOS)
-moz- Properties prefixed with -moz- are applied to Firefox
-o- old versions of Opera support properties starting with -o-
-ms- Internet Explorer and Microsoft Edge applies properties starting with -ms-

Example

-moz-orient- is in the experimental stage and is only implemented in Firefox. This property accepts either of four values, listed below

inline
block
horizontal (default)
vertical

If your current browser is Firefox you will see vertical progress bar whereas if you open this example in Chrome you will see the horizontal progress bar

Codepen example Browser Vendor Prefixes

How To Use Vendor Prefixes

In general, browsers process style properties in the order they’re listed, ignoring those properties they don’t recognize or support, so you always want the most current specifications listed last.

Vendor Prefixes Future

Browser vendors are discouraging the use of vendor prefixes as developers use these features on the production website, despite their experimental nature. Browser vendors have started implementing experimental features behind user-controlled flags or preferences. Its is recommended to not use nonstandard features in production to avoid unnecessary issues and inconsistencies

Helpful Resources

Below are some resources that I frequently use to spot experimental features

MDN Web Docs MDN is no. 1 resource for developers and you should bookmark the link. The HTML and CSS sections on the website have documentation for all the features that are supported by the latest browsers. Below each feature document, they have provided Browser compatibility section which is frequently updated and indicates whether a certain feature is implemented by the browser or not.
Can I use Can I use is another very helpful resource where you can search for a feature and it can tell whether all browsers have implemented the same or not? It also provides links to any known issues that are specific to that feature discovered in any of major browsers

👉Link to the original article

DEV Community: iteachfrontend

What Is Inside HTML Head Element?

Refrences

Creating First HTML Document

Element tags

Keys points to remember about element tags

Lets understand the structure of HTML document

Helpful links

Character Encoding Of HTML Document

Is it mandatory to specify character encoding?

What is UTF-8?

Summary

What Are Browser Vendor Prefixes?

CSS Vendor Prefixes

Example

How To Use Vendor Prefixes

Vendor Prefixes Future

Helpful Resources

What is `UTF-8`?