# Lists in html - italics

**URL:** https://forum.kirupa.com/t/lists-in-html-italics/644817
**Category:** Uncategorized
**Created:** [November 4, 2020, 6:30pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817 "2020-11-04T18:30:23Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [November 4, 2020, 6:30pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/1 "2020-11-04T18:30:23Z")

</div>

```auto
<li>my car is a bmw</li>
<li>my other car is a tesla</li>
<li>don't I wish</li>
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>
<ol>
 <li>chevrolet</li>
 <li>pontiac</li>
 <li>nissan</li>

</ol>
</body>

</html>

```

 ![Screen Shot 2020-11-04 at 11.22.10 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/c/c6683f47f15befc2bcd4d23d0966a39db2fa92df.png)

Here, I am playing with lists and I’ve enclosed a screenshot of the result in the browser.  
The first block of code is simply a list.  
The second - an unordered list.  
The last - an ordered list.  
I am wondering whether using - li - ul - ol - automatically outputs the result in italics because I thought that italics are the output ONLY when the list is bracketed by - em - tags. I was expecting a regular font in the lists - the italics were a surprise.

---

<div class="post-metadata">

### Author: ![HenryHell0](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/henryhell0/32/12508_2.png) [@HenryHell0](https://forum.kirupa.com/u/HenryHell0)
#### Post date: [November 4, 2020, 7:49pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/2 "2020-11-04T19:49:13Z")

</div>

I see:

 ![Screen Shot 2020-11-04 at 2.48.29 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/81f6aca7af09adfdabb8c4404603169be5c52da5.png)

No italics here. Im using the most recent version of chrome on a Macbook Pro with macOS Catalina. The font does look italic a little though, you could use some css to fix that: [CSS Fonts](https://www.w3schools.com/css/css_font.asp)

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 4, 2020, 9:20pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/3 "2020-11-04T21:20:01Z")

</div>

Generally, no. While browsers do have some default styles for different tags (for example `<cite>` may italicize by default), lists should not do this. If I had to guess, I’d say you have a `<i>` tag somewhere higher in the document which is making everything italic, maybe a `<li>` that was missing the “l” from a typo?

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [November 5, 2020, 2:35am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/4 "2020-11-05T02:35:29Z")

</div>

No solitary `<i>` that I can see but there is a lot of stuff above my lines of code so there might be something in there giving me the unwanted italics. I just removed all lines of code above what I have pasted here and yes! - regular fonts - no italics! Yea! So I’m a happy camper now.

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [November 5, 2020, 2:39am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/5 "2020-11-05T02:39:14Z")

</div>

no solitary `<i>` that I can see

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [November 5, 2020, 2:41am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/6 "2020-11-05T02:41:31Z")

</div>

I guess that an i enclosed in less than / greater than symbols does not show in a reply - there was such an i after solitary in both of my above posts

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 5, 2020, 5:09am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/7 "2020-11-05T05:09:56Z")

</div>

Another technique you can use to figure out what is going on is use the browser developer tools. In Chrome, selecting the text via the Elements Panel will show you the applied CSS styles. Below is an example of what the applied styles for the bold usernames on this page are:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/7/7226de84bd6f9671d70981577e6d63b113d91f8a.png)

This article (and the Elements Panel section) will help you better understand: [Chrome Dev Tools Tricks for Front End Developers](https://www.kirupa.com/hodgepodge/chrome_dev_tools_for_frontend_developers.htm)

Cheers,  
Kirupa

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 5, 2020, 12:08pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/8 "2020-11-05T12:08:22Z")

</div>

> [@John\_Stern](#):
>
> I guess that an i enclosed in less than / greater than symbols does not show in a reply

Same problem as before. You have to use code formatting. I’ve updated your posts.

Inline code formatting use single backticks: `<i>` is ``<i>`` (there’s also a button that looks like `</>` in the formatting toolbar you can use for this)

Multi-line code formatting uses 3 backticks above and below the code:

```auto
<html>
</html>

```

is

````
```
<html>
</html>
```

````

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 5, 2020, 7:18pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/9 "2020-11-05T19:18:07Z")

</div>

+1 to the `</>` button to make this easier 😛

```
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>

```

Paste your code, select it, and then just press the `</>` button:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/2/2a461be767c4d85d273f77e24d5c52b9c9b303ab.png)

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [November 6, 2020, 2:12am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/10 "2020-11-06T02:12:43Z")

</div>

I am confused. According to what you have just written, selecting multi lines of code and then pressing the \</\> button will then make the code readable in a reply. But I thought Senocular said in his reply that 3 bacticks above and below the lines of code are the only way to make the posted code readable in a reply. Unless pressing the number 1 key and then the \</\> is the equivalent of 3 backticks surrounding your lines of code. I need a bit of straightening out on this.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 6, 2020, 7:17pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/11 "2020-11-06T19:17:37Z")

</div>

They are all similar.

![posting](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/ac0c30fabba2c014dbb8740f0fa701abfdd0c2d0.gif)

🙂

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 7, 2020, 12:04am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/12 "2020-11-07T00:04:48Z")

</div>

> [@John\_Stern](#):
>
> But I thought Senocular said in his reply that 3 bacticks above and below the lines of code are the only way to make the posted code readable in a reply

I didn’t say “only” 🙃

For code blocks, you can either indent by 4 spaces or use backticks. The button in the editor UI will use indent whereas backticks are easier when typing it all out manually. Backticks also also let you specify a language if you want, giving you a little more control than the indent.

```html
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>

```

is done with

````
```html
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>
```

````

But if I use

````
```text
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>
```

````

I get

```plaintext
<ul>
  <li>chevrolet</li>
  <li>pontiac</li>
  <li>nissan</li>
</ul>

```

which doesn’t have the html formatting (coloring). The indent approach will try to guess on its own but won’t always get it right.

The easiest thing to do is stick to the icon. It will get you there 99% of the time.

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [November 7, 2020, 4:00pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/14 "2020-11-07T16:00:51Z")

</div>

Thanks to you - Kirupa and Senocular - both for pointing out the alternate ways to quote code. I like the Icon - 99% approach but I’ll certainly retain the 3 backticks approach in the back (unintentional pun here) of my mind as well.

---

<div class="post-metadata">

### Author: ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)
#### Post date: [November 18, 2020, 2:05am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/15 "2020-11-18T02:05:12Z")

</div>

Thanks kirupa ;  
That is a very cool editor , in your gif .  
Is the source code available some where ?  
Thanks

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 18, 2020, 7:16am UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/16 "2020-11-18T07:16:44Z")

</div>

The editor I’m showing in the GIF is the same as the one you use to reply to posts on the forums. It is from [https://www.discourse.org](https://www.discourse.org), whose source code is fully available 🙂

---

<div class="post-metadata">

### Author: ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)
#### Post date: [November 18, 2020, 3:58pm UTC](https://forum.kirupa.com/t/lists-in-html-italics/644817/17 "2020-11-18T15:58:45Z")

</div>

Thank you 🙂
