bullet points on collect-art-fair page

[cazjack]

Hiya I wanted to show the skills I bring via bullet points (or could be numbers) do you have a class for this already? if yes, can you send me the code? tah

[stephband]

The elements you are looking for are list elements: <ul> for Unordered List (bullet points) and <ol> for Ordered List (numbers), both must contain <li>s or List Items:

<ul>
    <li>You can put any html content in a list item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

• You can put any html content in a list item
• Second item
• Third item

<ol>
    <li>You can put any html content in a list item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

1. You can put any html content in a list item
2. Second item
3. Third item

[stephband]

While we're at it, some more semantics.

<em>

The <em> element for 'emphasis' (italics):

<p>Here's some text in <em>italic</em></p>

Here's some text in italic

<strong>

The <strong> element for bold:

<p>Here's some text made <strong>strong</strong></p>

Here's some text made strong

<abbr>

For abbreviations:

<p>We support the <abbr>LBGTQ</abbr> community.</p>

We support the LBGTQ community.

<time>

For times and dates, must have a 'datetime' attribute with a date, time or datetime in what is called ISO format. This one has no visual effect, it is purely semantic (unless we deliberately style it):

<p>I last skied on the <time datetime="2020-03-05">5th of March 2020</time>.</p>

I last skied on the 5th of March 2020.

<code>

The <code> element for computery stuff:

<p>This is a url marked up as code <code>https://creativebusinessgrowth.co.uk</code>.</p>

This is a url marked up as code https://creativebusinessgrowth.co.uk.

Probably a bad example, as you'd usually make a URL into a link.

<table>

A very tricky one:

<table>
    <thead>
        <tr>
            <th>First header cell</th>
            <th>Second header cell</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First data cell</td>
            <td>Second data cell</td>
        </tr>
        <tr>
            <td>Another row</td>
            <td>of cells</td>
        </tr>
    <tbody>
</table>

First header cell	Second header cell
First data cell	Second data cell
Another row	of cells

Tables can look pretty nasty without some style so if you use one let me know and I shall beautify it.

---

There is a complete list of elements and their attributes at https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

[stephband]

Closing because it looks like you did this. I copied the notes to the README file, so you can refer to them at https://github.com/cazjack/cazjack.github.com/