Forem: EOluwaseun

JavaScript Engine Behind the Scenes

EOluwaseun — Tue, 03 Oct 2023 02:05:52 +0000

How JavaScript code is able to run on so many various computing devices?

JavaScript is a high-level programming language designed to be understood by humans, as opposed to machine language (a series of 1s and 0s), which is designed for computer understanding.

Higher-level programming languages are developer-friendly, with more readable and writable syntaxes, making it easier for developers to understand, debug, and maintain the code compared to working directly with machine code.

With all that said, it’s clear computers do not understand JavaScript syntaxes the way developers do, but have you ever asked yourself how JavaScript code is able to run on so many various computing devices?

JavaScript is able to run on various computing devices with the help of a software component called the JavaScript engine.

The JavaScript engine can be found mostly in the browser or other runtime environment. In this article, we will take a closer look at how JavaScript engines work and explore some of the latest developments in JavaScript engine technology.

JavaScript Runtime Environment (JRE)

The JavaScript runtime environment is like a big box where JavaScript code is run. The box contains the JavaScript engine and some additional features (in browser context), such as the web APIs (to connect to the web), event loops, and callback queues. These features are provided so that JavaScript code can interact with the browser environment.

The most common JavaScript runtime environments include:

The Browser runtime environment
The Node.js runtime environment

A browser is by far the most common environment in which JavaScript code is executed. This is because JavaScript was originally designed to enhance interactivity in front-end applications. However, the Node.js runtime environment was also introduced for the purpose of executing JavaScript code outside the browser and creating server-side applications, APIs, and backend servers.

JavaScript Engine

A JavaScript engine is a program that interprets JavaScript code, translating it into machine code.

JavaScript is a single-threaded programming language that can only run one task at a time. The JS engine can get blocked in the process of running heavy tasks that take a long time to execute because of it’s single-threaded nature. However, JavaScript provides a way of handling such tasks using some of the asynchronous techniques like Promise, async/await, and callbacks, which enable the code to keep running without blocking the main thread.

The most common JavaScript engines are:

V8 engine (used in Chrome and Node.js)
SpiderMonkey (used in Firefox)
Chakra (used in Microsoft Edge)
JavaScriptCore (used in Safari )

The JavaScript engine is made up of two components, namely:

Call stack
Memory heap

The call stack and memory heap are both used to manage data storage and the execution of JavaScript programs, but they serve different purposes.

The call stack manages the order of currently executing function calls, while the memory heap stores dynamic data that is not currently being used, such as arrays, objects, and other complex data structures.

As previously mentioned, a JavaScript engine is a program that interprets and translates JavaScript code into a machine-understandable language. The JS engine begins by running the code through a parser.

PARSER

The parser is the first stage of the JS engine. It is responsible for breaking down the JavaScript code into smaller units called tokens (usually keywords, operators, and identifiers). After that, the parser checks for syntax errors on the sequence of tokens generated; if the parser finds an error, the JS engine stops execution of the code and throws a kind of error message. However, if the parser finds no errors, it produces what is called an abstract syntax tree (AST).

Abstract Syntax Tree (AST)

AST is a tree representation of your code syntax, making it easier for the JavaScript engine to understand, analyze, optimize, and execute the code syntax efficiently.

You can check AST Explorer to see what the actual AST looks like. It is an online tool that generates the AST for any code that you enter.

Interpreter

The interpreter operates by converting the AST that is generated during the parsing stage into an intermediate representation (IR) before the code is finally executed.

NB: JavaScript engines use a variety of strategies to execute JavaScript code efficiently in various execution environments. For instance, SpiderMonkey, which was the first JS engine, uses an interpreter to execute JavaScript code; however, some of the most modern JS engines, like the V8 engine, use techniques such as IR, just-in-time (JIT), and so on to achieve very high performance, making the V8 engine one of the fastest JavaScript engines available.

The Intermediate Representation (IR)

IR is a representation of a program’s source code; IR acts as an intermediate step between the AST-generated code and machine code.

Bytecode is an example of IR. It acts as a higher-level representation of machine code, which means bytecode is not tied to any machine architecture. As a result, bytecode can be executed on different platforms without the need for recompilation.

Why is an intermediate representation (IR) needed in a JavaScript engine?

IR is needed so that JavaScript code can be portable and run efficiently on every platform; without IR code, you may need to recompile every line of JavaScript code whenever you transfer it between platforms. However, IR made it possible for code written on machine “A” to run on machine “B” without the need for recompilation because IR is not bound to a specific machine architecture.

Compiler

The major work of the compiler is to take the IR code and then transform it into more optimized machine code.

Interpreter vs Compiler

Compilers and interpreters are two different programs used to translate higher-level languages (source code) into machine code that computers can understand.

An interpreter is a program that reads and translates source code one line at a time and then executes the code before moving to the next line for execution.

A compiler, on the other hand, is a program that instantly reads and translates the entire source code into machine code or an intermediate representation (bytecode) in one go. The compiled code is then executed directly by the computer.

Interpreter pros and cons

The interpreter takes less time to translate the source code; this is because the interpreter does not create an intermediate compiled version of the entire program before execution. The interpreter reads and executes the code line by line, and so on.

However, the con of using an interpreter comes when you run the same code repeatedly. For instance, if you’re in a loop, you have to retranslate the same code repeatedly. This makes the overall execution time of the program slow.

Compiler pros and cons

In contrast to the interpreter:

The compiler process is slow at the start because the program has to first translate the entire source code into machine code, or IR, before the code is finally executed by the computer. However, the execution is very fast because it doesn’t have to retranslate the same code repeatedly, e.g., if a code is running through a loop.

Additionally, during the compilation stage, the program type-checks for errors and makes edits to the code. These edits are known as optimizations.

These optimizations make the execution of the program really fast.

Just-in-time (JIT) Compilation

The basic idea of a just-in-time compiler is to avoid the need to repeatedly translate the same code where possible and to improve the overall performance of JavaScript in web browsers.

JIT combines the best of both the interpreter and compiler methods, which significantly improves the performance of JavaScript code.

Just-in-time in JavaScript refers to the process whereby the compilation of code is done at runtime (meaning it is done during the execution of the program), as opposed to ahead of time (AOT), where the code compilation takes place first before execution.

Monitor

Generally, every browser has its own unique way of implementing its own version of a just-in-time compiler. But the basic idea is often the same across all browsers. They added a new component to the JavaScript engine called the Profiler, also referred to as a Monitor. The monitor’s job is to keep track of how code is run, how many times it is run, and what types are used.

To start, Monitor runs a code through the interpreter; this is because interpreters are quick to start things up. While the code is being interpreted, the monitor identifies code that runs a few times (the warm code segment) and code that runs many times (the hot code segment), then stores such code in the memory for another execution so that next time the JavaScript engine comes across the same method of code in the program, it executes directly from the memory instead of having to recompile the original source code.

below is a breakdown with an example

function addSum(arr) {
  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

// Create an array with 100 elements
var arr = new Array(100);

var result = addSum(arr);

To execute the provided code, just-in-time parses the code and then generates baseline instructions for the function. The baseline instructions are relatively simple to make the code start quickly. As the code runs, JIT gathers information such as the array’s length and the types of operations performed. These instructions are needed by the compiler to decide if to generate an optimized version of the code or to continue the execution using the baseline instructions.

The compiler generates optimized machine code if it notices the array’s length doesn’t change during the loop; however, if the array length changes and still maintains the same data types, JIT recompiles the code using a more optimized version of the code, which significantly improves the performance of the loop.

function addSum(arr) {
  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

// Change in the array length to 200
arr.length = 200;

// Call the addSum() function
var result = addSum(arr)

Optimizing compiler

Basically, an optimizing compiler gathers information from the interpreter before making assumptions, which will then be used to create an optimized version of the code. For instance, the compiler can assume the types of variables and the order in which properties appear are going to be the same, and so much more.

However, the assumptions of the optimizing compiler may turn out to be wrong if there is a change in the code, most likely in the variable types. The optimizing compiler will then perform what is called deoptimization and generate new machine code (not so efficient code).

Deoptimization can occur for various reasons, but in our own case, the optimizing compiler can assume the array is always a number. However, if the array changes to a string, it may trigger deoptimization and then generate new machine code that is not so efficient.

Summary

JavaScript code is run in certain environments, the most common being the browser and Node.js runtime environments. The environment consists of the JavaScript engine to run JavaScript code and some additional features that enable JavaScript code to interact with its surroundings.
The JavaScript engine is the program that interprets and translates JavaScript code into machine-understandable language. It started by first running the code through a parser, which breaks the code into smaller units called tokens. Afterward, an AST is generated.
The interpreter is responsible for converting AST code into an intermediate representation (IR), such as bytecode, which acts as a higher-level form of machine code.
The JIT compiler takes the IR (bytecode) and compiles it into machine code, later generating a more optimized version of the code from the hot segment, which significantly improves the code’s performance.

Relevant References:

https://coralogix.com/blog/how-js-works-behind-the-scenes-the-engine/#menu

https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/

https://dzone.com/articles/how-javascript-engine-works

Thank you for reading,I originally posted this article on In Plain English

Javascript array manipulation using the push, pop, unshift, and shift methods

EOluwaseun — Tue, 08 Aug 2023 06:18:21 +0000

Javascript array is a special type of variable that is known specifically for its ability to store and manage the order of elements of any data type, including numbers, strings, booleans, objects, functions, and even other arrays;

The following image illustrates an example an array:

The following code illustrates an array:


let myArray = [1, 'hello', true, { name: 'james', age: 20 }, [0, 1, 2]];

Javascript array comes with a variety of built-in methods to enable common operations such as adding or removing of elements from the array, mapping, filtering, reducing, and many more.

This article focuses mainly on adding or removing elements from an array using the javascript’s built-in methods:

push()
pop()
shift()
unshift()

PUSH Method: The push() array method adds one or more elements to the END of an array, modifies the array, and returns the modified array length.

Syntax

The syntax is as follows:

array.push()

Where the array represents the name of the array.

Example

Const fruits = ['apple', 'orange', 'mango']

fruits.push('grape', 'cherry')

console.log(fruits)

Output

['apple', 'orange', 'mango', 'grape', 'cherry']

POP Method: The pop()The pop() array method performs the opposite action of Push()removing the last element from an array and returning that removed element..

Syntax

Array.pop()

Example

Const cars = ['audi', 'mazda',  'volvo', 'toyota']

Const popped = cars.pop('toyota') // toyota is removed from the cars array


console.log(cars)
console.log(popped) // The returned array

Output

 ['audi', 'mazda', 'volvo'] 

 ['toyota']

What's the Relationship between the PUSH and POP array methods?

The relationship between these two methods is that the PUSH can add elements to an array while POP can take the same elements away. The POP and PUSH method is often used together when you need to maintain a last-in, first-out(LIFO) data structure, such as a stack. The Push() and Pop() can be used to add and remove elements from a stack, respectively, in the reverse order in which they are added.

UNSHIFT Method: unshift() array method adds one or more elements to the beginning of an array, modifies the array and returns the modified array length.

Syntax


array.unshift()

Example


Const fruits = ['apple', 'orange', 'mango']

fruits.unshift('grape', 'cherry')

console.log(fruits)

Output


['grape', 'cherry', 'apple', 'orange', 'mango']

SHIFT Method: The shift() array method removes the first element of an array and returns that removed element.

Syntax


array.shift()

Example


Const cars = ['audi', 'volvo', 'toyota']

Const shift = cars.shift('audi')

console.log(cars)
console.log(shift)

Output


 ['volvo', 'mazda']

 ['audi']

SUMMARY

push() method adds one or more elements to the end of an array and returns the new array length.
pop() method removes the last element from an array and returns the removed element.
shift() method removes the first element from an array and returns the removed element.
unshift() method adds one or more elements to the beginning of an array and returns the new array length.

LIVE SERVER package installations through npm(node package manager)

EOluwaseun — Fri, 28 Jul 2023 02:36:32 +0000

Live Server is a local development tool that automatically reloads your web applications when you make changes to your codebase. The live server package is installed either through npm or as an extension, depending on your specific requirements and the development environment you are working with. In this article you will learn:

How to install live server package through npm.
Modes of installing live server package.
Why you should consider installing live server package through npm.

1.How to install live server package through npm

Before you begin with the installation of live server package, make sure you have Nodejs installed on your system 💻.
Nodejs is a run-time environment that allows you to run javascript on both frontend and backend.
You can download and install Node.js from the official website: https://nodejs.org. and select the installer for your operating system, (you probably want the .msi for Windows and the .pkg for Mac. While Nodejs is been installed, an additional command line is also installed along with it, known as NPM;
Npm is a package manager for the Javascript programming language, mainly for managing and installing packages in Node.js projects.

NB: Live Server is one out of the many javascript packages, so we need npm to install it.

Once Nodejs is installed on your system💻, you can proceed with the installations of live server package following the steps below 👇. However, You must have Created and Opened a project folder 📂 from your preferred code editor e.g. Vs Code , in other to follow the steps below.

a. Open your terminal and navigate to your project folder 📁.

b. Run npm init –y to initialize your project folder 📁.

c. Run npm install live-server -D to install Live Server in the development phase of your project.

d. After the installation is completed, it's time to Start the live server.

i. Firstly, navigate and add a start command to the scripts section of the package.json file of your project folder 📁.

ii. Save and close the package.json file.

iii. Run npm start to start the live server.

npm start command starts the live server, and make your web application accessible throughout the local server, and automatically reloads your WEB BROWSER whenever you make changes to the HTML, CSS, AND JAVASCRIPT FILE.

2.Modes of installing live server package

Live server package can be installed in one of the two methods listed below:

global
development

Let's discuss the difference between these two methods

Global installation

Global installation simply means the live server package is installed globally on your machine rather than installed locally within a specific project. This mode of installation allows you to run live server from any folder 📁 on your machine.

Below is the command to install live server globally 👇

npm install live-server –g

The -g option stands for global, and when it is specified, the live server package is installed globally and made available as a global command line tool on your system 💻.

Development installation

Development mode installation means the package is installed locally within a specific project. Development mode installation ensures that your project has it’s own version of live server and makes it very easy for other developers to collaborate with you on the same project , by simply installing all the required packages listed in your project.

Here is the command line to install live server in development mode 👇

npm install live-server -D

-D is known as development dependency. Set -D option only when you need to install live server in the development phase of your project .

3.Why you should consider installing the Live Server package through npm?

Installing a Live Server package using npm offers a variety of benefits including:

PORTABILITY : when you install a live server package through npm, you can easily set up your project on any machine that has Nodejs installed, Also when you share the project with other developers, all the dependencies listed in your project are easily installed using npm.
DEPENDECIES HANDLING : Your project dependencies are easily managed in a package.json file when you installed live server package through npm. This makes team collaboration easier and ensures consistent environments across different development setups.
VERSION CONTROL: By relying on npm, you can specify the exact version of live server you want to use in your project. This helps in maintaining consistency across different development environments and ensures that all team member uses the same version of live server.
BACKEND FUNCTIONALITY: If you are working on a web development project that requires backend functionality, such as handling API requests. Interactions with database and server-side rendering. you should consider installing live server using npm in other to get the live preview of your project in the front end. This is something a live server extension is not capable of handling.
COMPACTIBILITY: Npm is supported by a wide range of operating systems, including Windows, macOS, and Linux. Installing live server using npm ensures cross-platform compatibility across different development environments.

Summary

Live Server package is a local development tool with live reload capability for HTML, CSS and JavaScript files. Live Server package is installed either globally or in development mode. However, before installing a live server package using npm , your system 💻 must have Node.js installed. Installing live server package through npm offers variety of benefits including dependencies handling, version control, compatibility e.t.c

Undefined and Null are two dinstinct data types in javascript ...check the difference 👇

EOluwaseun — Thu, 08 Sep 2022 15:01:18 +0000

Undefined

Undefined data types in javascript means the variable has been declared, but has no value.
Example 👇

Null

Null in javascript, is an object that can be assigned to a variable as a representation of nothing or void.
Example 👇

THE END!

I know most of you understand how the two data types in javascript differ,but this information is only for beginners.

Thanks for Reading😊😊...

How to choose between the div and span tags in an HTML document and their practical usage.

EOluwaseun — Tue, 06 Sep 2022 21:18:46 +0000

👉 Firstly,let's start by identifying the similarities and differences between div and span tags.

1️⃣ div and span tags are both generic HTML elements

2️⃣ div tag is a block-level element while on the other hand, span tag is an inline element.

3️⃣ div tag is used to wrap sections of a document, while smaller portion of text, image, and other content is wrapped using span tags.

A div

div or (a division element) is defined as a generic Block-Level element used in HTML document to create sections for content such as headers, footer, images and other elements.

What is block-level element🤔❓

👉 A block-level element is a page element that takes a new line and the whole width of the browser or its container. Example 👇

span

span tag is an Inline element that is used to select inline content such as text, links, and other HTML elements that are displayed inline for styling purposes.
Example 👇

Inline element🤔❓

👉 Inline element displays in a single line.And doesn't create a new line,it only takes up the space bounded by the tags defining the HTML element.

Can the use of div and span tags be regarded as the best practices in HTML document🤔❓

👉Div and span tags are considered "generic" components and are not best practices in HTML documents since they do not accurately communicate the content contained inside to the search engines🥺.

Only "semantic" elements communicate a true meaning ✅.

👉 A semantic element explains its meaning in detail to both the browser and the developer.

Example of semantic Elements are:
• nav
• header
• footer
• main>
• section ,e.t.c

SUMMARY
1️⃣ When creating a block-level element, a div is used; however, when wrapping content, such as text, a span is used.

2️⃣ Use of semantic elements is the best practices when creating a website.

CSS POSITION PROPERTY

EOluwaseun — Thu, 18 Aug 2022 18:03:00 +0000

What is POSITION PROPERTY in CSS ❓

➡️ The Position Property in Css is used to determine where an HTML element will appear in an HTML document.

Position property has five(5) different values which are 👇

•STATIC
•RELATIVE
•ABSOLUTE
•FIXED
•STICKY

1️⃣ POSITION STATIC

👉 All HTML page elements are Static by nature and they are displayed just as they appeared during the normal flow of the document.

Normal flow of HTML elements are displayed from LEFT ⬅️ to RIGHT ➡️ /TOP ⬆️ to DOWN ⬇️ order, in the browser window💻.

Just as their name implies "STATIC" This Element cannot be moved or controlled, and it is unaffected by the TOP, BOTTOM, LEFT, RIGHT, and Z-INDEX properties.

2️⃣ POSITION RELATIVE

👉 Position Relative automatically changed HTML elements from their Static, which is the (default) state to a dynamic state.

Here, using TOP, BOTTOM, RIGHT and Z-INDEX properties is totally acceptable.

Position Relative allows any HTML element to be moved from its current state to any other portion of the page.

3️⃣ POSITION ABSOLUTE

👉 The Position Absolute placed HTML elements in relation to the edges of it's first Positioned ancestor or the edges of the browser.

What is ancestor in CSS❓

An ancestor is just the parent, grandparent, or great-grandparent of an HTML tag up to the root

👉 NOTE: HTML elements are positioned in relation to the edges of the browser's view port if position ancestor is not defined.

4️⃣ POSITION FIXED

👉 Position Fixed is used to pinned or fixed an HTML element to the edges of the browser's view port

▪︎Fixed position always maintained its state and it is not affected by scrolling.

👉 Hint: whenever Position is set to Fixed,two things✌ are certain

The element is taking away from its normal position.
The element is automatically converted from block element to inline-block.

An Inline-block lost it’s 100% width by default as the width is set to auto depending on the length of the content inside of it.

5️⃣ POSITION STICKY

👉 Position sticky is used to position and stick an HTML element in relation to the edges of the browser view ports.

Position sticky is treated as relative until the scroll location reaches a particular point at which it takes a fixed position.

I made a quick video on how to add image/Logo to a Navigation Bar,Using Html and Css.

EOluwaseun — Tue, 16 Aug 2022 13:10:32 +0000

https://www.instagram.com/p/Cg_aDR-oYRk/?igshid=YmMyMTA2M2Y=

HTML basics structure

EOluwaseun — Sat, 30 Jul 2022 02:35:00 +0000

1️⃣ The DOCTYPE

Every first Line of any HTML document must begins with a Declaration that identifies the Document Type.

The Declaration lets the browsers know in advance the kind of document they will be processing, Enabling them to modify their processing procedures accordingly

The document type is formatted as👇

<!DOCTYPE html>

This tag informs the browser that the Language used to create the markup on the page is HTML

➡️ Hint: There is no Case difference in
<!DOCTYPE > declaration

2️⃣ Html Element

HTML tag appears immediately after the document type declaration at the top☝of the page.

The Opening and Closing HTML tags act as the building blocks for our Webpage, with the majority of Other tags nested inside of them.

👉 NOTE: An opening HTML tag must have a corresponding closing tag to specify the ending of the HTML Page.

3️⃣ HEAD TAG

The Open head tag comes next after open html tag .The head is also a pair tag i.e it must be Closed.

The head tag contains important instructions for our browser, and the most frequently found elements in the head tag includes

TITLE
META
STYLE
LINKS,etc.

➡️ TITLE

The title of the page is Firstly defined by the head tag.
Specified with both open and closing tags. these tags. then display the real title of the page in the browser's tab or title bar.

<title>MY FIRST WEBPAGE</title>

The result👇

➡️ META

The meta tags are the next set of tags in our Head tag following the title.

What's meta❓
meta is an HTML tag that provides information about document's metadata.

👉 Metadata is simply an information about data.

Metadata are hidden from displayed on the Webpage, but the main goal of it, Is to give the browser and search engines valuable information about your website

The first meta tag is known as the meta name description . The description is then Followed by the content .

<meta name= "description" content=" ........ " />

👉 Description is an HTML tag that summarises the page’s content.

👉The content🤔❓
Content is the sample of text that appears below the link of your search results

The purpose of the meta description is to entice searchers to visit your website. And it informs them of the page's content.

Example below👇

The next tag indicates the👇

< meta charset = “utf-8" >

👉 Charset is an HTML attribute,that defines character encoding which browser uses when displaying website's content

• The value of the charset is “UTF-8”

What's About "utf-8"🤔❓

"utf-8" is a character encoding that converts machine code into text that can be read by humans and vice versa.

👉Any language can be displayed using
"utf-8". Additionally, it expands upon the previous encoding scheme ASCII , which uses 7-bit code points to encode 128 unique characters .

While utf-8 uses 8-bit code points, supports up to 256 distinct characters , and introduces a number of extra international characters like Chinese and Arabic that ASCII does not.

What are machine code🤔❓

Machine code is a collection of binary numbers or bits that computers can comprehend.

Since binary is the only language that a computer could understand, utf-8's primary function is to translate our text file into that format.

And Lastly we have the meta viewport 👇

<meta name="Viewport"content="width=device-width, scale-initial=1"/>

What's Viewport🤔❓

👉 Viewport is the viewers visible portion of the webpage 🖥.

Viewport meta tag inform the browser how to regulate the size of the pages. And the size changes depending on the device 💻📲.
Example below 👇

👉The open and closing style tags are the following tag in our head tag

All Code that is included in the style tag are refer to as style rules,Also, it defines the Cascading Style Sheet (CSS) for pages

The Cascading Style can be used to format any HTML element, including font , colors , line , height , and more.
However, because of how frequently it is used, CSS is the subject of a whole course.

👉 The body

The body serves as the primary content region of an HTML document.
It is also referred to as the last child of an HTML tag and contains a starting tag and an ending tag that are both enclosed within the HTML tag.

HTML FOR BEGINNERS

EOluwaseun — Sun, 17 Jul 2022 07:09:10 +0000

Here is a fast introduction to HTML, which is an excellent language to learn if you're new to web programming.

A Thread ↓ 🧵.

WHAT IS HTML❓

HTML is a markup language that provides instructions to web browsers and informs them on how to display web pages for viewers.

The way fonts🔠, colors🌈, pictures🧸, and hyperlinks are presented on websites is defined by HTML and CSS.

HTML is also known as a language used to format webpages,it is required in order to construct a well-formatted web document, also known as a WEBPAGE.

A WEB PAGE is what❓

A well-formatted document called a Webpage is used to share information online👨‍💻.

Why are properly formatted documents on web pages necessary❓

It is necessary so that the layout of a websites can be good for reading

👉Hypertext Markup Language is what HTML stands for 🚹.

HYPER is short for "hyperlink," which enables us to go across pages or within the same page.
TEXT is the information that will really appear on the website.
MARKUP LANGUAGE is a set of tags used to format webpages so that they can be read by browsers like Firefox, Chrome, Safari, and others.

How do Browsers work❓

Browsers are programs you install on your computer to read HTML files and displays it on the screen 🖥.

Note that only the content enclosed within HTML tags is shown by browsers on Web pages.

<h1>HELLO WORLD </h1>

The Result of this code in the browser will be👇
HELLO WORLD

HTML tag types

There are two different kinds of tags

1️⃣ paired tags
2️⃣ unpaired tags.

Opening and Closing tags make up a Pair of tags. example... 👇

<h1>HELLO WORLD 🌎 </h1>

The first h1 that has less and greater than symbols indicates the opening tags, While the second h1 indicates you are closing your tags by adding a forward slash.

Unpaired tags/stand-alone tags as their name implies, these tags are single, unpaired, and stand-alone.
example... 👇

 <img src="/picture.png">

This defines its open and closing tags.

What are the html features and restrictions?

👉FEATURES

It is versatile.
many different browsers support it
highly effective language for webpage structuring.

👉RESTRICTIONS

HTML's ability to design has limitations. So, we are unable to design websites that are appealing. So we use html and css.
Does not support programming, Thus, we are unable to develop interactive web sites. As a result we use javascript.