Html Question posted in
Some basic documentation can be found here.

Simple HTML formatting with images. Super new at coding/html

I’m just wondering how I can make it so that I have a clear division between list items without copy and pasting <br/> tags. I thought that if the image is contained within the <p> tag and that tag is closed prior to the next entry, that that would effectively "press enter" (if you will), so that the next header or text bit doesn’t wrap around the image of the previous list item. I feel like I’m missing something simple here.

<li><h5>Artificial intelligence (AI)</h5>
<p><img src="AI.jpg" width="150" height="150" align="left" hspace="10"/> AI systems were limited in their capabilities,
but recent advancements have propelled AI into the mainstream. Today, various AI models power virtual assistants, 
business process management, and advanced data analytics. In just a short period, AI is predicted to become an 
integral part of our lives.</p> </li>
<br/>
<br/>
<br/>
<br/>

I tried to contain the image tag within the paragraph tag of the list item, thinking that this would naturally create a space between the next entry of the list.

Tags:

2

Answers


  1. 0

    Your code will work but using <br> tags in an unnumbered list will give an error on page validation.

    Element br not allowed as child of element ul in this context.
    (Suppressing further errors from this subtree.)

    Also all your content is within one set of <li> tags. Maybe try adding some others. Use some css such as

    li {
  margin: 20px 0;
}
    Login or Signup to reply.
  2. 0

    It looks like you are trying to structure a list with images and text in HTML. If you want to separate list items without using multiple <br> tags, you can use CSS to style your list items and create clear visual divisions between them. Here is the code :

    CSS

    <style>
.list-item {
  margin-bottom: 20px;
  overflow: auto;
}

.list-item img {
  float: left;
  margin-right: 10px;
}
</style>

    HTML

    <ul>
  <li class="list-item">
    <h5>Artificial intelligence (AI)</h5>
    <p><img src="AI.jpg" width="150" height="150" /> AI systems were limited in their capabilities, but recent advancements have propelled AI into the mainstream. Today, various AI models power virtual assistants, business process management, and advanced data analytics. In just a short period, AI is predicted to become an integral part of our lives.</p>
  </li>
  
  <li class="list-item">
    <h5>Another item</h5>
    <p><img src="another_image.jpg" width="150" height="150" /> Description of the second item goes here.</p>
  </li>
  
  <!-- Add more list items as needed -->
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search