What is HTML

The first public specification of the HTML by Tim Berners-Lee in 1991, and then to HTML's codification by the World Wide Web Consortium (better known as the W3C) in 1997.

To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language).

As one can see from the W3C quote, HTML is defined as a markup language. A markup language is simply a way of annotating a document in such a way as to make the annotations distinct from the text being annotated. Markup languages such as HTML, Tex, XML, and XHTML allow users to control how text and visual elements will be laid out and displayed.

The standards by W3C

Created in 1994, the World Wide Web Consortium (W3C) is the main standards organization for the World Wide Web (WWW). It promotes compatibility, thereby ensuring web technologies work together in a predictable way.

To help in this goal, the W3C produces Recommendations (also called specifications). These are very specific official rules that software manufacturers (like Google, Apple, Mozilla…) must follow to ensure that websites display the same way across all browsers.

The membership of the W3C at present consists of almost 400 members; these include businesses, government agencies, universities, and individuals.

Validator

A key part of the standards movement in the web development community of the 2000s was the use of HTML validators.

https://validator.w3.org/

Check a website site the validator

HTML5

In 2014, W3C adopted the work done by WHATWG (a group of developers at Opera and Mozilla) and named it HTML5.

There are three main aims to HTML5:

• Specify unambiguously how browsers should deal with invalid markup.

• Provide an open, nonproprietary programming framework (via JavaScript) for creating rich web applications.

• Be backward compatible with the existing web.
  While parts of the HTML5 are still being finalized, all of the major browser manufacturers have at least partially embraced HTML5.
  

HTML Syntax

HTML documents are composed of textual content and HTML elements. The term HTML element is often used interchangeably with the term tag.

Elements and Attributes

HTML elements can also contain attributes. An HTML attribute is a name=value pair that provides more information about the HTML element.

Nesting HTML Elements

Often an HTML element will contain other HTML elements. In such a case, the container element is said to be a parent of the contained, or child, element. Any elements contained within the child are said to be descendants of the parent element; likewise, any given child element may have a variety of ancestors

In order to properly construct this hierarchy of elements, your browser expects each HTML nested element to be properly nested. That is, a child's ending tag must occur before its parent's ending tag.

Semantic Markup

Semantic tags are used to describe the purpose of the content.

HTML semantic tags allow you to give meaning to content by indicating its role or function within the page.

• <nav> indicates a navigation area

• <footer> indicates the page footer

• <article> contains self-contained content

• <section> groups a coherent set of information

What for ?

• Improves accessibility
  • Not all web users are able to view the content on web pages. Users with sight disabilities experience the web using voice reading software. Visiting a web page using voice reading software can be a very frustrating experience if the site does not use semantic markup
  • Not all web users are able to view the content on web pages. Users with sight disabilities experience the web using voice reading software. Visiting a web page using voice reading software can be a very frustrating experience if the site does not use semantic markup

• Improves search engine optimization (SEO)

• Makes the code easier to understand for developers

• Allows browsers to better structure the information

Structure of HTML Documents

The <title> element is used to provide a broad description of the content. The title is not displayed within the browser window. Instead, the title is typically displayed by the browser in its window and/or tab.

The title has some additional uses that are also important to know. The title is used by the browser for its bookmarks and its browser history list. Perhaps even more important than any of the aforementioned reasons, search engines will typically use the page's title as the linked text in their search engine result pages.

Doctype

Tells the browser (or any other client software that is reading this HTML document) what type of document it is about to process

Head and Body

UTF-8

The <html> element is sometimes called the root element as it contains all the other HTML elements in the document. Notice that it also has a lang attribute. This optional attribute tells the browser the natural language that is being used for textual content in the HTML document, which is English in this example. This doesn't change how the document is rendered in the browser; rather, search engines and screen reader software can use this information.

The character encoding for the document is UTF-8. Character encoding refers to which character set standard is being used to encode the characters in the document.

The original ASCII standard of the 1950s defined English (or more properly Latin) upper and lowercase letters as well as a variety of common punctuation symbols using 8 bits for each character. UTF-8

Head & Body

HTML pages are divided into two sections: the head and the body, which correspond to the <head> and <body> elements. The head contains descriptive elements about the document, such as its title, any style sheets or JavaScript files it uses, and other types of meta information used by search engines and other programs. The body contains content (both HTML elements and regular text) that will be displayed by the browser.

Additional files

It is common practice, however, for web authors to place additional external CSS, JavaScript, and image files into their own subfolders.

Each reference to an external file in an HTML document, whether it be an image, an external style sheet, or a JavaScript file, generates additional HTTP requests resulting in slower load times and degraded performance.

Indentation & Comment

We will see that the presentation of your programming file is very important.

You need to use proper indentation and include comments in your code file.

1. Readability: Well-indented code is easier to read and understand, both for yourself and for others who may work on the code later.

2. Debugging: Clear structure helps you identify logical blocks, spot errors more quickly, and fix bugs efficiently.

3. Collaboration: When working in teams, clean code with comments makes collaboration smoother, as everyone can follow the logic without confusion.

4. Maintenance: Code often needs to be updated or modified months or years later. Comments explain why something was done, not just what was done.

5. Professionalism: Clean and documented code reflects a good programming practice and a professional mindset.

Quick Tour of HTML Elements

Page 84 of the book

HTML5 Semantic Structure Elements

Page 97 of the book

<article>

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section>s within.

• Each 
<article> should be identified, typically by including a heading (<h1> - <h6> element) as a child of the <article> element.

<aside>

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

<section>

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

<article>

	<h1>Choosing an Apple</h1>
	
	<section>
	  <h2>Introduction</h2>
	  <p>
	    This document provides a guide to help with the important task of choosing
	    the correct Apple.
	  </p>
	</section>
	
	<section>
	  <h2>Criteria</h2>
	  <p>
	    There are many different criteria to be considered when choosing an Apple —
	    size, color, firmness, sweetness, tartness...
	  </p>
	</section>
</article>

<header>

The <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.

Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1 – h6 element) and optional subheading, but this is not required.

<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>
    I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and
    their ears are so, so snugly soft!
  </p>
</article>

<nav>

The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

Headings

Outline

Headings are also used by the browser to create a document outline for the page. Every web page has a document outline. This outline is not something that you see. Rather, it is an internal data representation of the control on the page. This document outline is used by the browser to render the page. It is also potentially used by web authors when they write JavaScript to manipulate elements in the document or when they use CSS to style different HTML elements.

useful for

• accessibility

• SEO

• good and readable structure

To see the outline of a web page : https://hoyois.github.io/html5outliner/

Heading style

The browser has its own default styling for each heading level. However, these are easily modified and customized via CSS

<a>

The <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

Links to external sites (or to individual resources such as images or movies on an external site).

Links to other pages or resources within the current site.

Links to other places within the current page.

Links to particular locations on another page (whether on the same site or on an external site).

Links that are instructions to the browser to start the user's email program.

Links that are instructions to the browser to execute a JavaScript function.

Links that are instructions to the mobile browser to make a phone call.

Open in a new page

You can force a link to open in a new browser window by adding the target=“_blank” attribute to any link. In general, most web developers believe that forcing a link to open in a new window is not a good practice as it takes control of something (whether a page should be viewed in its own browser window) that rightly belongs to the user away from the user. Nonetheless, some clients will insist that any link to an external site must show up in a new window.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Site</a>

noopener

• Prevents the newly opened page in another tab from controlling the original page via window.opener.

• Without noopener, the opened page can access the JavaScript context of the original page and potentially:
  • redirect the original page,
  • steal data through malicious scripts.

noopener is therefore a protection against "tabnabbing" (an attack in which the original page is secretly replaced).

noreferrer

• Ensures that the target site does not receive information about the origin site.

• In other words, it removes the HTTP "Referer" header, so the visited site will not know which page the user came from.

Using noreferrer helps protect the user's privacy.

Inline text elements

They are called inline elements because they do not disrupt the flow of text (i.e., cause a line break). HTML defines over 30 of these elements.

Some common inline text elements

<img>

While the <img> tag is the oldest method for displaying an image, it is not the only way. In fact, it is very common for images to be added to HTML elements via the background-image property in CSS. For purely decorative images, such as background gradients and patterns, logos, border art, and so on, it makes semantic sense to keep such images out of the markup and in CSS where they more rightly belong. But when the images are content, such as in the images in a gallery or the image of a product in a product details page, then the <img> tag is the semantically appropriate approach.

<img
  src="/shared-assets/images/examples/grapefruit-slice.jpg"
  alt="Grapefruit slice atop a pile of other slices"
  title="Grapefruit slice atop a pile of other slices" />

Exercise

Find the difference between <img>, <picture> and <figure> tag, and test it.

<ul> <ol>

The <ul> element represents an unordered list of items, typically rendered as a bulleted list.

The <ol> element represents an ordered list of items — typically rendered as a numbered list.

Details and summary

Create a style for the details icon

summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

<style>
summary {
  position: relative;
  padding-left: 1.2em;
  cursor: pointer;
}

summary::before {
  content: "▶"; /* flèche fermée */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8em;
  transform: translateY(0.2em);
  transition: transform 0.2s ease;
}

details[open] summary::before {
  content: "▼"; /* flèche ouverte */
}
</style>

<details>
  <summary>Afficher les détails</summary>
  <p>Voici les informations supplémentaires.</p>
</details>

Tools Insight

Page 107 of the book