Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).
A list with or without links or images can be used anywhere in a webpage. This one would be typical for using in a vertical navigation section.
Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size: 1.2em; background: #D3D3D3 }
content {margin:100px 100px 10px 100px; display:block; width:auto; height: auto; border: none; background: transparent; padding:10px;}
nav {top:0px; left:1px; width: 100%; height:80px; position:fixed; padding: 4px; text-align: left; font-size: 20px; font-weight:bold; color: black; background: DodgerBlue;}
nav a:visited, nav a {height:80px; margin:0 auto; border-top:1px solid #000000; border-bottom:1px solid #000; text-align: left; text-decoration:none; line-height:20px; color: black;}
nav a:hover {background:#aaa; color:#fff;}
ul.a { list-style-type: none; /* default */ list-style-position: outside; /* default */ }
ul.a li { display: inline; margin-left: -20px; padding: 20px 20px 20px 0; }
ul.b { list-style-position: outside; /* default */ }
</style>
</head>
<body>
<content>
<h1>Using list in a nav bar</h1>
<h3>This can be placed inside the navigation section. Padding can be increased or decreased as needed.</h2>
<ul class="a">
<li><img src= "jfa.ico" width= "40px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "nav+summary.html" title= "Another navigtion example">Web Nav</a></li>
<li>URL or icon</li>
</ul>
<p>Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).
<h2>Note: default unordered list</h2>
<p> A list with or without links or images can be used anywhere in a webpage. This one would be typical for using in a vertical navigation section.
<ul class="b">
<li><img src= "jfa.ico" width= "40px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "nav+summary.html" title= "Another navigtion example">Web Nav</a></li>
<li>URL or icon or . . . . </li>
</ul>
</content>
<nav>
<ul class="a">
<li><img src= "jfa.ico" width= "30px" title= "Alexander icon"></li>
<li><a href= "https://johnandval.org" title= "John's and Val's Website">Home</a></li>
<li><a href= "nav+summary.html" title= "Another navigtion example">Web Nav</a></li>
<li><a href= "index.html">Index</a></li>
</ul>
</nav>
</body>
</html>