mjmwebdesignz

[mjmwebdesignz]

WebP

In September 2010, Google developed the WebP image file format to replace the JPEG, PNG, and GIF file formats. Animation, alpha transparency, and both lossy and lossless compression are all made possible.

Smaller, more appealing images that can speed up the web are simpler to develop using the WebP format. WebP frequently achieves an average of 30% more compression than JPEG and JPEG 2000 without losing image quality.

The container format for WebP's lossy compression technique, which is based on the intra-frame coding of the VP8 video codec, is called Resource Interchange File Format (RIFF).  WebP is using block prediction. The values of the three blocks above it, as well as the block to its left, define each block's projected values (block decoding is done in raster-scan order: left to right and top to bottom).

Browser support for WebP

Most current browsers are compatible with the WebP format. However, It is preferable to only deliver WebP images to clients who can display them properly and to revert to legacy formats for those who cannot. On the client and server sides, many methods can be used to identify WebP support. WebP support detection is a feature offered by some CDN providers.

Server-side content negotiation 

Web clients send an "Accept" request header, indicating the content formats clients are ready to accept. The web server knows it can provide WebP images without risk if a browser has previously indicated that it will "accept" the image/webp format, substantially simplifying content negotiation.  

Capability of HTML5 <picture> element

The <picture> element which is supported in HTML5, allows  to list multiple, alternative image targets in priority order, such that a client will request the first candidate image that it can display properly.

Using JavaScript

Another approach is to try to successfully decode a very short WebP image and check for success.

How to convert an image to  WebP?

WebP command line utility cwebp.exe may be used to convert the image.

[mjmwebdesignz]

RESPONSIVE WEBSITE

Responsive Websites respond to environment behavior of users based on screen size, platform and orientation etc.

The term "responsive Web design" refers to a completely new way of approaching design of websites and not just adjusting screen resolutions and automatically resizing pictures.

In addition to desktops and laptops, the main tools for doing work are often smartphones, tablets, and task-specific mobile apps which encourage responsive websites.

A responsive design uses methods like fluid proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, to automatically modify and adapt to any device screen size and viewing environment, whether it is a desktop, a laptop, a tablet, or a mobile phone. According to the fluid grid principle, page element sizes should be specified in percentages rather than absolute measurements like pixels or points.

This approach combines visual elements, adaptable grids and layouts, and skillful CSS media queries. The website should immediately adjust to account for resolution, image size, and scripting capabilities as the user switches from their laptop to their iPad or their mobile device. The website should be equipped with the necessary technologies to react to user preferences automatically. This would do away with the requirement for a distinct design and development stage for each new device introduced to the market.

Creating Responsive webpages:

Adaptive web design (AWD)

Instead of using a single static page that loads (and appears) the same on all devices or a single page that dynamically reorders and resizes content based on the user's device, screen size, and browser, adaptive web design (AWD) uses the creation of multiple versions of a web page to better fit the user's device. Server-side detection is used in adaptive web design and selects the size and arrangement of the design to be shown. Based on typical screen sizes and resolutions, the adaptive design will offer different versions of the site (or page) to various devices.

UsingCSS Frameworks like Bootstrap:  For creating responsive and mobile-first websites, there exist CSS Frameworks like Bootstap which enables a website or app to recognise the size and orientation of the visitor's screen and automatically adjust the display.

The layout components of Bootstrap are the most noticeable since they have an impact on the entire web page. Every single element on the page is contained within the "Container," which is the basic layout element. A fixed-width container or a fluid-width container are the two options available to developers. The former employs one of the five specified fixed widths, depending on the size of the screen displaying the page, whereas the latter always fills the width with the website.

The mobile-first approach presupposes that employees' main tools for doing work are smartphones, tablets, and task-specific mobile apps.

[mjmwebdesignz]

REACT JAVA SCRIPT LIBRARY

React is a frontend JavaScript toolkit for building user interfaces based on UI components that is free and open-source.It is sometimes known as React.js or ReactJS.

It is kept up-to-date by Meta (previously Facebook) and a group of independent programmers and businesses. With frameworks like Next.js, React can be the foundation for single-page, mobile, or server-rendered applications. Making React apps typically necessitates the use of extra libraries for routing and specific client-side functionality because React is only concerned with state management and presenting that information to the DOM.

Beyond only UI, React includes a number of extensions for supporting the architectural design of complete applications, including Flux and React Native.

React use declarative programming model. Developers create views for each application state, and when data changes, React updates and renders components. Programming that is imperative contrasts with this.

Components:

React code is created of entities called components. These components must be created in the SRC folder using the Pascal Case naming standard since they are reusable (capitalize camelCase). The React DOM library can be used to render components to a specific DOM element. Through "props," (short form of property) one can transfer values between components when rendering one.

Features of React

 JSX (Java Script XML) : This embeds HTML into JavaScript code:

Virtual Document Object Model (VDOM) :  VDOM is updated when an object's state changes in a React application. Then it compares, and updates only those objects in the real DOM rather of updating every object.

Architecture: React is the "View" in a Model View Controller (MVC) architecture, which determines how the app appears and functions.

Extensions:There are numerous extensions available for React that cover the complete application architecture. It offers server-side rendering and aids in the development of mobile applications. React may be extended with Flux and Redux among other things.

Data Binding: Since React uses one-way data binding, all operations continue to be quick and modular.

Debugging: Since there is a sizable developer community, React applications are straightforward  and simple to test. Facebook offers a browser extension that makes debugging React simpler and faster. React Hooks are functions which allow developers to "hook onto" React state and lifecycle characteristics from function components.  Hooks do not work inside classes. A few built-in hooks are useState, useContext, useReducer, useMemo and

[mjmwebdesignz]

P5.js

p5.js is a library of JavaScript used for innovative coding. It is built on Processing, a programming environment for creativity. Because the domain processing was already occupied, Processing first utilised proce55ing.net domain. Later when the domain was purchased, the acronym "p5" is still commonly used in place of "p5.js" to refer to the previous domain name.

The fundamental objective of Processing is to make learning how to create interactive, graphical programmes and to visualise programming languages to make them more user-friendly as simple as possible for beginners.

The advantage of using the JavaScript programming language is that every online browser has a JavaScript interpreter built in, allowing p5.js scripts to run on any web browser.

Additionally, Processing is a programming language that strongly emphasises developers' ability to create software prototypes fast in order to test out new ideas or determine whether anything functions. Thus, "sketches" are a common term for programmes created in Processing (and p5.js).

Preferred Editors:

Before adding the JavaScript files, the official p5.js handbook suggests using Bracket or Sublime, which will eventually allow us to function like any other programming language. The p5.js Web Editor is the best alternative, though. It is built on a web-based programming environment.

P5.js and JavaScript

JavaScript's core language has all the features required to give browsers any capability. It might make use of a canvas, a loop, a function, a conditional statement, or DOM manipulation. One should utilise it to develop and build any framework.

P5.js is a JavaScript library. A few capabilities provided by P5.js, which runs on Pure JavaScript, make it simple for JavaScript users to sketch on the web.

Example:

function setup () {

  createCanvas (400, 400); //Canvas size 400*400

}

function draw () {

  background('blue'); //background color blue

}

setup (): 

It is the setup () function's statements. At the start of the program, it runs once. The first statement needs to be createCanvas.

draw (): Statements from the draw() function are executed until the programme is ended.  Following the last line being read in order, the first line is again executed.

[mjmwebdesignz]

MARKDOWN LANGUAGE

Markdown is a lightweight markup language which can be used for generating formatted text with a text editor.

Markdown does not change the font size, colour, or type in any complex ways. It can alter the document by formating bold text, headings, and lists.

Markdown can be used to create web content. It is written in the "plaintext" format. The only distinguishable symbols in plaintext are the normal alphabet and a few asterisks (*), underscores (_), backticks (') etc.

In contrast to time-consuming word processing programmes, text written with Markdown may be easily shared between computers, mobile devices, and people. It is quickly becoming the norm of writing for academics, researchers, writers, and many other professionals.

To make a phrase italic in Markdown, using underscore before and after the text would convert the text to italics for example, _this_ word would become this.

To make a phrase bold in Markdown, surround words with two asterisks (**).  

A standardised effort was started in 2012 by Jeff Atwood, John MacFarlane, and other individuals. Instead of "Markdown," they changed the name to "CommonMark." CommonMark has been adopted by the following websites and projects: Discourse, GitHub, GitLab, Reddit, Qt, Stack Exchange (Stack Overflow), and Swift.

Filename extensions markdown is .md or. markdown

Implementations

Over a dozen programming languages have Markdown implementations, and a large number of programmes, platforms, and frameworks also support it.

Several languages like Ada, Applescript, SQL, Bash, Bat, C, Perl, Python, etc., support Markdown.

Additionally, there are Markdown plugins for all popular blogging platforms.

Markdown-formatted chat messages are supported by Microsoft Teams, the GNOME Evolution email client etc.

Reddit and GitHub both utilise Markdown to layout their comment sections.

[mjmwebdesignz]

WEBSITE REVENUE

How website makes revenue

Websites uses multiple ways to generate revenue. To draw in as many visitors as possible, the website must offer a positive user experience (UX) through engaging content, eye-catching images, and compelling headlines, among other things. More visitors equate to more revenue.

The following are some keyways to generate income.

Display Ads: Put advertisements on your website for viewers to see. Visitors are taken to the original website where they can participate in activities or transact when they see or click on adverts. Pay per click (PPC) and cost per impression (CPI/CPM) advertising is the typical way to generate revenue from a website. Although there are other ad networks, Google AdSense is by far the biggest.

Businesses or organisations pay you to advertise their messages after purchasing advertising space on your website, providing a written ad or designed ad. Online advertising is typically used by media websites like magazines, newspapers, and television networks.

Affiliate Programs: By promoting or making a distinct product available for purchase on your website, you can earn money with affiliate marketing. For instance, you might discuss a book you've read with your clients and advise them to purchase one for themselves. Creating an affiliate profile and including a direct link to the book on the Amazon website are further options.

Build an eCommerce site: As Online purchasing gains popularity, there is a huge opportunity to profit in eCommerce. An eCommerce website is one where customers can make purchases of a variety of items and services. There are two approaches to take: conventional online retail store model or dropshipping. As a dropshipper, you don't buy and keep the items before someone orders it.

Sell Your Own Physical Products: Perhaps you've made your own goods like cakes, flowers, artwork, or some distinctive stuff that you bought from a real store. Instead of a fully-fledged e-commerce site, you would want to sell them to the entire world from your website.

Create an Affiliate Store: Building an affiliate shop could be a great alternative to going through the bother of creating your own online store for you to generate money similar to Amazon Affiliate store. In essence, you advertise Amazon's goods on your website. You receive a commission when customers who use your links to buy such things do so. This might be a great way to make money if you have a lot of traffic.

Entertainment/Media Website

Large headlines can frequently generate a lot of traffic in the media and entertainment sectors. Anywhere there is traffic, there are ads. People like to stay current with news, entertainment, sports, and other media. Additionally, you will never run out of content ideas because there is always something new to talk about.

eCourse: Someone is likely to want to learn more about you and your approach if they truly adore your goods or services. Your audience might be interested in purchasing an eCourse from you if you have some excellent tips and tricks to share on whatever subject you blog about.

Sell Ebooks: Even yet, if you want to make money from your website by selling digital items, don't be shy to publish an ebook.Ebooks are a wise way to make money because they are also incredibly easy to create. By reusing the content, you can transform some of your blog's most popular posts into an ebook.

Create Members Only Content: The quickest and easiest way to make money from selling "members only" or "limited" content is to launch a membership website. A great way to get recurring income is to be able to charge a monthly membership fee.

Sell Freelance Services: By promoting and selling freelance services, you can earn money writing on WordPress in a truly amazing way. You can quickly create a "Hire Me" page to emphasise your qualifications.

Take Donations: Sometimes the simplest way to get something is to just ask. The funds might be given to a deserving cause. Keep in mind that people are far more likely to give you money if you make the process simple for them. You can use the money to a worthwhile cause. If you want to collect money online, you may set up a pre-built donation form. Additionally, you can designate different donation sites for things like one-time gifts, recurring payments, or memorials and tributes.

Collect and Grow data and Email List: Websites collect user data, such as demographic and market information (e.g. in-market for a car). By selling it through behavioural data exchanges, advertisers can use this information to target their online media campaigns.

A little under 70% of website visitors leave without coming back. Consequently, getting their email address should be the first step in your email marketing approach. Exit pages, or the pages where visitors most commonly entirely exit your website, are a great place to include these pop-up adverts. Offering some articles, newsletters, publications, or downloads is one way to collect email addresses.

[mjmwebdesignz]

CSS

CSS is the acronym for Cascading Style Sheets. The appearance of HTML elements on screens, in print, or in other media is described by CSS. The use of CSS saves a lot of time. It can control the design of multiple web pages at once.

A priority system is used to choose which style rule should be implemented when many style rules matches an element, cascading its name. There is an order of importance to it.

The addition of font and colour information to every page made the process of creating large websites time-consuming and expensive.The World Wide Web Consortium (W3C) developed CSS to address this issue. The style formatting of the HTML page was removed using CSS.

The World Wide Web Consortium oversees the CSS guidelines (W3C). The Internet media type (MIME type) text/css has been registered by RFC 2318 for use with CSS (March 1998). The W3C provides a free CSS validation service for CSS documents.

Example of <style> element:

 <style>

    h1 {

        color: red;

    }

</style>

Without requiring any explicit coding, all h1 elements in the document will then automatically turn red.  A single change   can be made to alter the colour of every h1 element in the page, if so desires.

Also , another advantage with CSS is that the styles can easily be added to an external CSS file.

<link href="path/to/file.css" rel="stylesheet" type="text/css">

A crucial component of CSS is inheritance, which depends on the ancestor-descendant relationship to function. Inheritance is the process by which characteristics are passed down from one element to its progeny and back again.

Levels of CSS  

CSS that has been developed further improves upon earlier versions by adding functionality and improving definitions.

CSS has different profiles and levels, and they are identified as CSS 1, CSS 2, CSS 3, and CSS 4.

CSS 1

CSS level 1, which was released on December 17th, 1996, is the first CSS specification to be recognised as a W3C Recommendation. Font attributes, Color, Alignment, Images, Tables, Margin, Border, Padding, etc. are all included.

CSS 2

The W3C created the CSS level 2 specification, which was released in May 1998 as a recommendation. Many updates to CSS has been done over the years to offer new features include the concept of media types, support for auditory style sheets, absolute, relative, and fixed placement of elements, and z-index. CSS 2.1, CSS 3 and CSS 4 all are examples of this updation.

 CSS 2.1

This updates CSS 2 to correct errors, removes features that aren't fully supported or compatible, and adds already-implemented browser extensions to the specification.

CSS 3

The "modules" that make up CSS 3 are a collection of distinct documents. Each module preserves backward compatibility while introducing new capabilities or extending features specified in CSS 2.

CSS 4

CSS 4 was released in December 2020. However, there isn't a single, comprehensive CSS4 specification.

[mjmwebdesignz]

ANGULAR JAVA SCRIPTING (JS)

 AngularJS is an open-source JavaScript framework which is used to create web apps with a focus on CRUD operations (operations like Create, Read, Update, and Delete) and AJAX-style development. Its objective is to overlay the browser with directives necessary for creating dynamic online applications, thus enhancing the HTML vocabulary.

The guiding philosophy of AngularJS is that UI is best specified declaratively (in HTML), action is best described imperatively (in JavaScript), and the two should never be combined.

The HyperText Markup Language (HTML) page, which contains additional customised HTML properties, was first read by the AngularJS framework in order to function. These properties are processed by Angular as directives to connect the page's input or output components to a model that is represented by common JavaScript variables. These JavaScript variables could have their values manually entered into the code or obtained from either static or dynamic JSON resources.

The AngularJS framework reads the HyperText Markup Language (HTML) page, which has extra custom HTML attributes in it. Angular can interpret those attributes and directives to could bind different parts of a page.  

AngularJS uses the term "scope" as a "Model" in “MVC" architecture and all variables used in the scope are accessed by the "View" as well as the "Controller".

The most remarkable aspect of AngularJS was its two-way data binding, which largely frees the server backend from the burden of handling templates. Instead, templates are created using plain HTML and rendered in accordance with the information found in a model-defined scope. Through a controller, Angular's $scope service recognises and changes the model section and adjusts HTML expressions in the view. Any changes to the view are also mirrored in the model.

A developer could create unique, reusable HTML-like elements and attributes that define data bindings and the behaviour of presentation components using AngularJS directives. 

[mjmwebdesignz]

PARALLAX WEBSITES

Parallax websites use a web design technique in which the background of a website scrolls more slowly than the foreground. This results in a 3D effect as visitors, which adds a sense of depth and makes browsing more engaging. This makes websites more eye-catching and appealing.

We view distant objects as moving more slowly because our eyes interpret objects close to us as larger than those farther away. For a very long time, in many different media, the illusion has been used with parallax to produce a realistic appearance. It was initially used in traditional animation and video games like Super Mario as early as Disney's Snow White and the Seven Dwarfs.

In 1982, the video game Moon Patrol became the first to fully incorporate parallax scrolling, using three separate background layers that moved at different speeds to represent the space between them. Moon Patrol is widely given credit for creating parallax scrolling.

Thanks to advancements in CSS and HTML, parallax effects later turned into a mainstay of contemporary web design.

Few  methods for implementing Paralax

Layer method: Parallax effect is achieved by just shifting each layer's position in the same direction by a different amount. Faster moving layers give the impression of being nearer the virtual camera. The playfield can have layers in front of it.

This method is employed by many a websites.

Sprite method: To create the parallax effect, pseudo-layers of sprites are created, and then individually controllable moving items are placed on top of or behind the layers.

Recurring Pattern/Animation technique: By moving the bitmaps of the individual tiles to simulate the parallax effect, scrolling displays consisting of individual tiles can appear to "float" over a repeating background layer.

Raster method: An image's pixel lines are normally composited and refreshed from top to bottom, with a little delay between each line's rendering and the next.

[mjmwebdesignz]

SEARCH ENGINE OPTIMIZATION

Search engine optimization (SEO) is the process of increasing the exposure of a website and traffic to it when customers use   search engines.   SEO gives organic (sometimes known as "natural") traffic precedence over direct or paid visitors. Unpaid traffic can be produced via searches for photographs, videos, news, scholarly publications, and vertical search engines that cater to particular businesses.

When used as an Internet marketing tactic, SEO takes a number of factors into account, such as how search engines function, the computer algorithms that govern how they behave, what people search for, the actual search terms or keywords they enter into search engines, and which search engines the target market prefers. SEO is carried out as a result of the increased traffic that higher-ranking websites will receive from search engines (SERP).

Bots are used by search engines like Google and Bing to crawl online pages by moving between websites, gathering data about them, and indexing them. Imagine the index as a huge library where a librarian can bring up a specific book (or web page) to assist you find it at the moment.

The algorithms that look at sites in the index while taking into account thousands of ranking factors or signals then decide in what order pages should appear in the search results for a certain query. The librarian has read every book in our fictitious library and knows which one would have the answers to your issues because she has read them all.

Methods for SEO

Getting indexed

Search engines with large user bases, such as Google, Bing, and Yahoo!, use crawlers to find pages for their algorithmic search results. Pages that are linked from other pages that are indexed by search engines do not need to be submitted because those pages are already available. The Yahoo! Directory and DMOZ, two well-known directories that closed in 2014 and 2017, respectively, both required manual submission and human editorial assessment. Google offers Google Search Interface, for which an XML Sitemap feed may be generated and uploaded for free in addition to their URL submission interface, to make sure that all pages are found, especially those that cannot be found by automatically following links. A paid submission service with a cost per click guarantee was once offered by Yahoo!

Preventing crawling

To stop offensive content from showing up in search indexes, webmasters can instruct spiders through the common robots.txt file in the root directory of the site not to examine particular files or directories. Additionally, a page can be specifically blocked from being indexed by a search engine by employing a meta tag designated for BOTs.

Increasing prominence

Cross-linking across pages of the same website to offer more links to important pages may improve its visibility. When a website has a decent page design, visitors are more inclined to trust it and stay on it. The reputation of a website suffers when people abandon it rapidly. Material should include frequently searched keyword phrases in order to be relevant to a variety of search queries. Typically, this will increase traffic. By consistently upgrading its content to attract search engines, a website can increase its authority. The relevancy of a website's search listings tends to increase when pertinent keywords are added to its metadata, such as the title tag and meta description, which increases traffic. The canonical link element, 301 redirects, or URL canonicalization can all be used to ensure that links to different versions of a page's URL count toward the page's link popularity score.

There are two basic sorts of SEO tactics: those that search engine providers advocate as part of excellent design ("white hat"), and those that search engines disapprove of ("black hat"). Spamdexing is one of the methods used by search engines to lessen the impact of the latter. These techniques and the practitioners who use them have been categorised by industry critics as either white hat SEO or black hat SEO. Black hats expect that once the search engines find out what they are doing, their sites may eventually be temporarily or permanently blocked, whereas white hats typically produce results that last a long time.

SEO could produce a respectable return on investment. There are no promises of ongoing referrals, search engines' algorithms change, and they are not compensated for organic search traffic. A company that depends substantially on search engine traffic may experience significant losses if the search engines stop sending customers because of this lack of assurance and unpredictability.

[mjmwebdesignz]

WEBSITE OPTIMIZATION

Optimizing a website is the process of making a website better so that it is more suitable for user and customer needs as well as business needs.

It encompasses a wide range of significant factors, including user experience (UX) optimization, faster download and response time, establishes brand authority, Conversion and revenue optimization, as well as traffic optimization.

Need Web optimization:

Improved User Experience (UX) aims to deliver the most pertinent experience for the targeted audience and motivates users to carry out the desired actions utilising any device and resolution.

Faster response of website  will boost user satisfaction and visitor loyalty. Additionally, improved online performance leads to less data exchange, which lowers electricity consumption and environmental impact.

Brand authority is the reputation of a website as a trustworthy source of expert ideas and information with greater customer trust and industry influence. Websites that concentrate on particular specialty and provide up-to-date information position themselves as authorities in these fields. 

Website traffic can be increased with the aid of website optimization. Search engine optimization (SEO), social media marketing (SEM), and other types of paid advertising are frequently used to increase website visibility, attract more targeted visitors, and promote return visits. 

How is it done

A website should be built with a long-term strategy in mind, else it can easily become a mess.

The design of the website should encourage users to take the intended activities using any device and resolution and for a happy user experience (UX) for the audience that is being targeted. There should be beautiful meaningful pictures and catchy headlines.

To speed up website download and responsiveness, developer may have to implement browser/server caching, image optimization, optimum plugin usage, and encryption/SSL. 

Image uses up the most resources on the website. Utilizing responsive images, new formats for images like WebP, Content delivery network (CDN) can make pages light weight.

Plugins should be minimized as plugin come at the expense of the time-to-first-byte (TTFB).

A website must be designed to function flawlessly on all devices, especially mobile devices.  The page should be responsive and light weight, with no popups and interstitials, simple to find search icons, etc.

[mjmwebdesignz]

WEB 3

Web3, the next generation of the internet,    will allow websites and apps to handle data in a way that is intelligent and human-like. In 2014, Ethereum co-founder Gavin Wood made the term "Web3" more well-known. Venture capital firms, cryptocurrency enthusiasts, and major technological businesses began to show interest in the concept in 2021.

The following are the main components of Web3 Ubiquity, Semantic Web, Artificial Intelligence, Spatial Web and 3D Graphics, Decentralization through Blockchain, etc. 

Blockchain-powered applications will   ensure adequate decentralization and AI and ML tools will help automate and grow it as needed to create a semantic web.

Decentralized data interconnection is a significant improvement over the Web 2.0 generation of the internet, where data is typically housed in centralised repositories and is consequently vulnerable to manipulation or worse.

With Web3, creators, designers, developers, and others will be able to communicate with their audiences and supporters without the use of middlemen. Through the use of smart contracts, they will be able to establish a fully democratic and self-governing organisation that will be immune to outside meddling and geographical constraints.

Commenters from The Open Rights Group assert that Web3 will lessen the influence of powerful technical firms while enhancing user data security, scalability, and privacy. They also voice reservations about Web3's decentralised web component, citing the dangers of insufficient moderation and the spread of undesirable content. Some people worry that their privacy will be compromised as a result of greater data collection or that a select few investors and people would end up owning the majority of the world's wealth. Some people, citing Jack Dorsey and Elon Musk as examples, have said that Web3 is nothing more than marketing gimmick or catchphrase.

[mjmwebdesignz]

HTML 5

HTML 5

HTML5 is the most recent version which is used to markup language used to generate the framework and content of webpages. HTML5 is the most recent web standard released by the World Wide Web Consortium (W3C). HTML5 is a full package combining CSS and Javascript that can be used to create websites as well as handle presentation, add functionality, and utilise Web APIs. Previously, HTML was just used to design the structure of websites.

Since HTML5, the code that specifies web pages, is the lightest and fastest version, it is advised to use it while developing new online apps.

The Web Hypertext Application Technology Working Group (WHATWG), an association of the major browser manufacturers, is responsible for maintaining HTML5. During May, 2019,  W3C declared that the WHATWG would be the only publisher of the HTML and DOM standards.

HTML5 encompasses more than simply HTML; it also includes CSS, Javascript, and APIs. HTML is used to create the structure of a webpage, CSS is used to enhance the presentation layer's appearance, and Javascript is used to give HTML elements functionality. Embedded fonts, drag-and-drop, geolocation, microdata, audio, and video, as well as canvas-based drawing and animation, offline storage, and web APIs, to name a few.

HTML5 and features of Flash

Although some HTML5 features are occasionally compared to Adobe Flash, the two platforms are very different from one another. Both offer tools for integrating Scalable Vector Graphics into web pages as well as for playing audio and video. However, HTML5 by itself cannot support animation or interactivity. It needs to be improved with CSS3 or JavaScript. HTML5 can't directly match many of the features of Flash.

A few new features

Many brand-new syntactic features are added in HTML5. Expandable sections are natively implemented through <summary>...</summary> and <details>...</details> rather than depending on CSS or JavaScript, and support for scalable vector graphics (SVG) content and MathML for mathematical formulas was also added. These changes allow for the native inclusion and handling of multimedia and graphical content.

Structure elements like  <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure> are added to documents to improve their semantic content.

Modifications

 A number of elements and characteristics were altered, redefined, or standardised, including <a>, <cite>, and <menu>. Other elements and attributes were eliminated, while new ones were added. The HTML5 definition now includes the APIs and Document Object Model (DOM) as core components, and HTML5 now more clearly outlines how incorrect pages should be handled.