Skip to content

Courses / HTML5 Mastery: Complete Beginner to Advanced Course / Document Structure

658 people viewed this

Document Structure

7. Character Encoding and UTF-8

Character encoding determines how text characters are represented as bytes. HTML documents should declare their character encoding correctly.

<meta charset="UTF-8">

UTF-8 supports a broad range of characters, including Latin letters, Odia characters and many other writing systems.

Example

<!DOCTYPE html>
<html lang="or">
<head>
    <meta charset="UTF-8">
    <title>ମୋର ୱେବସାଇଟ୍</title>
</head>
<body>
    <h1>ନମସ୍କାର</h1>
    <p>ମୁଁ HTML ଶିଖୁଛି।</p>
</body>
</html>

Save the source file using UTF-8 encoding to avoid common character-display problems.

8. The Viewport Meta Element

Mobile browsers may otherwise use a wider virtual layout viewport for some pages. The viewport metadata helps the page use the device's viewport appropriately.

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

This commonly used declaration makes the layout viewport width correspond to the device width and sets the initial scale to 1.

Important: This declaration does not automatically make a website responsive. Responsive styling and suitable layouts are also required.

9. The title Element

The title element defines the document title. It is commonly displayed in the browser tab, bookmarks and other browser interfaces. Search engines may use it when generating search result titles.

<title>HTML Document Structure - Codementrix</title>

Use a descriptive title that identifies the page. Each page on a multi-page website should generally have its own useful title.

The title element belongs inside head, not inside body.

10. Metadata and Resource References

Metadata describes the document, while resource references connect it to external files or other resources.

Stylesheet Reference

<link rel="stylesheet" href="styles.css">

This tells the browser that the document uses an external stylesheet named styles.css.

External Script Reference

<script src="app.js" defer></script>

Rate this course

5.0 · 1 rating

Stars show on this course. Your written note stays private.

Your stars