ESILV - WebDev

English

Français

English

Français

Appearance

Important Tags (1) ​

Semantic Tags ​

These are tags whose names indicate a meaning regarding their content. It is recommended to use them as much as possible.

Page Structuring Tags ​

  • <nav> (only the top-level navigation)
  • <main> (only one per page)
  • <header> There can be several per page, notably one per <body>, one per <section>, and one per <article>
  • <footer> same as above
  • <section> Contains a section of the page, a <section> can be inside another <section>...
  • <article> Contains, for example, a blog post or a comment
  • <aside> Dedicated to a part completely independent of the page content
  • <p> For paragraphs
  • <blockquote> Used for quoting another source
html
<html>
  <main class="box-vue">
     <header>
          <h1>The page header</h1>
     </header>
     <section>
          <header>
               <h2>Section title</h2>
          </header>
          <article>
               <header>
                    <h2>Article title</h2>
               </header>
               <p>
                    A paragraph of the article
               </p>
               <footer>
                    The article footer
               </footer>
          </article>
          <footer>
               The section footer
          </footer>
     </section>
     <footer>The page footer</footer>
  </main>
</html>

All these tags have a default display of type block (see CSS): this means that if no style is added to the element or its parent, there will be a line break before and after each of them.

Heading Tags ​

The heading tags <h1> to <h6> allow structuring headings from level 1 to 6 respectively.

There should be only one h1 tag per page!

List Tags ​

There are several types of lists:

  • <ol> and its <li> for an ordered list (ordered list and list item)
  • <ul> and its <li> for an unordered list (unordered list and list item)
  • <dl> with its <dt> and its <dd> for a definition list (definition list, definition term and definition description)
html
<html>
  <ol class="box-vue">
     <li>The first in the list</li>
     <li>The second</li>
  </ol>

  <ul class="box-vue">
     <li>The first in the list</li>
```All these tags have a default display of type *block* (see [CSS](/css/)): this means that if no style is added to the element or its parent, there will be a line break before and after each of them.

### Heading Tags

The heading tags `<h1>` to `<h6>` allow structuring headings from level 1 to 6 respectively.

There should be only one `h1` tag per page!

### List Tags

There are several types of lists:

- `<ol>` and its `<li>` for an ordered list (**o**rdered **l**ist and **l**ist **i**tem)
- `<ul>` and its `<li>` for an unordered list (**u**nordered **l**ist and **l**ist **i**tem)
- `<dl>` with its `<dt>` and its `<dd>` for a definition list (**d**efinition **l**ist, **d**efinition **t**erm and **d**efinition **d**escription)

::: code-group

```html
<html>
  <ol class="box-vue">
     <li>The first in the list</li>
     <li>The second</li>
  </ol>

  <ul class="box-vue">
     <li>The first in the list</li>
     <li>The second</li>
  </ul>

  <dl class="box-vue">
     <dt>Term</li>
     <dd>A first definition of the term</dd>
     <dd>A second definition of the term</dd>
     <dt>Another term</li>
     <dd>A first definition of the other term</dd>
     <dd>A second definition of the other term</dd>
</dl>
</html>

Tables ​

The <table> tag is used to create tables. Inside, the <thead> tag will contain one or more rows with the table headers (the column titles). Then comes <tbody> and optionally the <tfoot> tag.

Each row is marked by a <tr> tag (table row), and each row contains one or more <th> (table header cell) and/or <td> (table data cell).

The <table> tag should be used to display tabular data, and never for layout purposes.

html
<html>
  <table>
    <thead>
      <tr>
        <th>
            Column 1 Title
        </th>
        <th>
            Column 2 Title
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
            Row 1 Column 1 Value
        </td>
        <td>
            Row 1 Column 2 Value
        </td>
      </tr>
      <tr>
        <td>
          Row 2 Column 1 Value
        </td>
        <td>
          Row 2 Column 2 Value
        </td>
        <td>
      </tr>
    </tbody>
  </table>
</html>