3. HTML5

HTML5 in Web Programming

Introduction to HTML5

HTML5 is the fifth and latest major version of HTML (HyperText Markup Language), the standard programming language for designing and building websites. HTML5 provides several advantages over its predecessors, including improved readability of code and enhanced SEO (Search Engine Optimization). It offers new features and elements that make web development more efficient and accessible.

Key Points:

Advantages of HTML5 Tags

Enhanced Readability

The use of HTML5 tags (elements) significantly enhances the readability of the code. These tags provide a clear understanding of the content of specific sections of the webpage. For example, tags like <header>, <footer>, <article>, and <section> provide a clear idea of the content within these tags.

Improved SEO

HTML5 elements also increase a webpage's visibility in search engine results. Search engines use these tags to understand the content structure and prioritize the indexing of the webpage accordingly.

CSS Properties in HTML5

Float Property

The float property in CSS is used to wrap text around elements. When an element is floated, it is taken out of the normal flow and placed to the left or right of its container, where text and inline elements will wrap around it.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>

<p>In this example, the image will float to the left in the paragraph:</p>

<img src="smiley.gif" alt="Smiley face" width="42" height="42">
<p>Because the image has a style of "float: left", it will be floated to the left of this text.</p>

</body>
</html>

Clear Property

The clear property in CSS is used to control the behavior of floating elements. If an element is cleared, it will not wrap around the floated elements in its container.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
.clear {
  clear: both;
}
</style>
</head>
<body>

<p>In this example, the image will float to the left in the paragraph:</p>

<img src="smiley.gif" alt="Smiley face" width="42" height="42">
<p class="clear">Because the paragraph has a style of "clear: both", it will not wrap around the floated image.</p>

</body>
</html>

Handling Horizontal Scroll in Websites

Horizontal scrolling on a website can occur when elements with a specified width or padding extend beyond the width of the screen. To prevent horizontal scrolling, ensure that the content fits within the viewport width. Use CSS properties like max-width, box-sizing, and responsive design methods to handle such issues.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  max-width: 100%;
  box-sizing: border-box;
}
</style>
</head>
<body>

<div class="container">
  This is a container that will fit within the viewport width to prevent horizontal scrolling.
</div>

</body>
</html>

This example ensures that the .container class will never exceed the width of the viewport, thus preventing any possibility of a horizontal scroll.

Reference

The content in this document is based on the original notes provided in Azerbaijani. For further details, you can refer to the original document using the following link:

Original Note - Azerbaijani Version