<figure>

• The figure tag is used to semantically organize the content of images, videos, audios or even charts or tables, block of codes in the HTML document.
• <figure> tag is a container tag.
• This tag provides a container for content that is equivalent to a figure or diagram in a book.
• This tag is inline element.
• You can use the figure element in conjunction with the <figcaption> element to provide a caption for the contents of your figure element.
• It makes it easy for the machine to understand the code. Easy to get on search engines.
• The <figure> element itself may contain multiple other child elements be it a block of code, images, audios, video etc.
• The figure tag contains default alignment and styling.

<img>

• The image tag is used to add an image to an HTML page. <img> tag can only insert image.
• <img> tag is a void tag.
• The HTML <img> tag is used for embedding images into an HTML document.
• It is an inline element but when we specify width and height it becomes a block element.
• In image tag there’s no special tag for caption rather we can use <p> tag or <span> tag to add pseudo captions.
• It is difficult for machines to understand.
• The <img> tag can not have multiple elements inside it only images can be added in <img> tag.
• The image tag does not contain any default alignment and styling.

Both tags should provide titles that represent the overall message of your webpage, so the best way to optimize Title Tags and H1 Headers is to write for your readers, while following SEO best practices.

Main Differences:

• Title Tag is a meta tag: it's in the head of the page, that is not part of the actual content. You won't see the title tag on the page, other than at the top of your browser screen. 
• Title Tag a hint to Google what your page is about.
• Title Tag is shown in the SERP as the link searchers click on to visit your page.
• Heading Tag is visible on the page. In other words. It's usually the most prominent text, and tells a visitor what to expect on that page.

Common Best Practices:

• Try to place the keywords early in both tags.
• Use only one H1 Header per webpage.
• Avoid keyword stuffing: use the keywords only once within each tag.
• Include the page’s primary keywords in both tags.
• Keep both titles short. (50 characters or less recommended)

The Title composition guidelines:

• The headline should be catchy enough to catch the user’s attention.
• The recommended number of characters is 60-70. More characters will not show up in Google's SERP.
• Place significant keywords closer to the beginning of the Header.
• The dilution of the main queries with low-frequency queries is allowed.
• The use of question enumeration is not recommended.
• Transactional words like buy, order, price, and so on should be used.
• The title must motivate the user to go to the website.

The H1 composition guidelines:

• The H1 Header can be used only once on the page.
• The length is usually up to 50 characters.
• The H1 subject intersects exclusively with what is discussed in the text section.
• You can’t over spam with queries.
• You can use a frequent question that did not fit in the title.

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:

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

Responsive Images

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

<picture>
  <source srcset="img_smallphoto.jpg" media="(max-width: 600px)">
  <source srcset="img_photo.jpg" media="(max-width: 1500px)">
  <source srcset="photo.jpg">
  <img src="img_smallphoto.jpg" alt="Flowers">
</picture>

Responsive Text Size

The text size can be set with a vw unit, which means the viewport width. (Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.)

Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

JavaScript in body or head:

• Scripts can be placed inside the body or the head section of an HTML page or inside both head and body.

JavaScript in head:

• A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.

JavaScript in body:

• A JavaScript function is placed inside the body section of an HTML page and the function is invoked when a button is clicked.

External JavaScript:

• JavaScript can also be used as external files. JavaScript files have file extension .js. To use an external script put the name of the script file in the src attribute of a script tag. External scripts cannot contain script tags.

Advantages of External JavaScript:

• Cached JavaScript files can speed up page loading.
• It makes JavaScript and HTML easier to read and maintain.
• It separates the HTML and JavaScript code.
• It focuses on code re usability that is one JavaScript Code can run in various HTML files.