<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Une nouvelle page HTML" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page test</title>
<link rel="stylesheet" href="style.css"/>
<script src="script.js" defer></script>
<base href="https://www.mywebsiteURL.com/" target="_blank">
</head>
<body>
</body>
</html>
Explanations:
<!DOCTYPE html>
so the browser follows the HTML specification
<html lang="fr">
html tag -> to inform the browser it's an HTML document
lang attribute -> to allow screen readers to invoke the correct pronunciation
<head>
head tag -> machine-readable information about the document
<meta>
meta tag -> to add metadata with no specifc tag
charset attribute -> (charset stands for "character set") to specify the document's character encoding (UTF-8 being the universal character set, encodes multiple languages). This tag/attribute must be located within the first 1024 bytes of the document.
name and content attributes (they come together: metadata's name, metadata's value)
-> name value description -> to put in content's value a very short description of the page's content. This will be used by search engines to provide a description of the page.
-> name value viewport (for a browser, 'viewport' means what's visible, a viewport definition tells the browser how to render the page) -> to put in content's value some elements like width that could be device-width and the ratio between the device width and the display zone size (positive number between 0.0 and 10.0), separated by comas. It helps the styling of the page looking similar on mobile as it does on a desktop or laptop and sets the initial zoom level when the page is first loaded by the browser.
<title>
title tag -> to specify the website's title where the HTML document belongs; the title page could also be added (that's what is appearing in the brower's tabs). It's also this title that is indexed by search engines. Note that this is also useful for people using assitive technologies to rapidly aprenhend the website's content.
<link>
link tag -> to link the HTML document to an external resource, for instance a stylesheet or JavaScript
rel attribute -> to specify the relation. Use stylesheet for CSS
href attribute -> stylesheet's URL (can be relative)
<base>
base tag -> specifies a default URL and a default target for all links on a page