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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.