8JavaScript in the Web Page

8.1. Ecosystem of the web page: the HTML sequence

8.1.1. Structure and semantics/layout and presentation

HTML5 is said to be “semantical”. What does it mean (in short)?

  • – When reading an activity report, we expect a title (also: author, date, etc.), an introduction, several sections, a conclusion, a table of contents, etc..
  • – When reading a newspaper, we expect a header (title, date), headlines and a few paragraphs, the usual rubriques: politics, world, culture, etc..
  • – On an e-commerce site, we expect product descriptions, society descriptions, online order tool, etc.

These expectations are quite usual and make sense: that is the semantics! The HTML5 semantic tags are meant to help search engines to figure out what is on a web page: <header>, <nav>, <main>, <sections>, <detail>, <figure>, etc.

Older tags are preserved, and new suggested practices may add to the semantics: e.g. a title tag should comply with its context, a <img> tag should contain a description (attribute alt=“…”), etc.

8.1.2. Reminder about HTML5 tags

Here are the tags that, though not all mandatory, we recommend using to describing the context of your web page ecosystem.

<!DOCTYPE html>
<html lang="fr">
  <head>
   <title>Basic web page</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="style.css">
  </head>
  <body>
   <script id="code.js"> /* JavaScript code */ </script>
  </body>
</html>

8.1.2.1. The DOCTYPE

This informs the browser about what follows: in the above ...

Get JavaScript and Open Data now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial