seo Question posted in
Some basic information to get you started with this can be found here.

Proper use of HTML5 elements – SEO

I have my profile image and below it I want to place my name and a few things about me. I don’t know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?

Snippet

<div class="profile">

  <div><img src="profile_image.jpg"></div>
  <h1>first last</h1>

  <p>Coffee snob.</p>

</div>

Full Body HTML

<body>

  <div class="page">

    <div class="profile">

      <div><img src="profile_image.jpg"></div>
      <h1>first last</h1>

      <p>Coffee snob.</p>

    </div>

    <div class="sites">

      <ul>
        <li><a href=""><img src=""></a> <a href=""><img src=""></a></li>
      </ul>

    </div>

  </div>

</body>

The rest of the site are just app icons taking to my social media sites. There’s no other content. My site also doesn’t have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.

Tags:

2

Answers


  1. 0

    You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)

    <div class="profile">
  <img style="display: block" src="profile_image.jpg">
  <h1>first last</h1>
  <p>Coffee snob.</p>
</div>

    Otherwise, the rest of the code is perfectly fine.

    Login or Signup to reply.
  2. 0

    It does depend of what exactly you want to do with it but if I understand your question.
    You don’t need divs for your image just set up different image classes in your CSS. 

    .image1
{
  width:100px;
  height:100px;
}

    Then your HTML would look like 

    <img src="profile_image.jpg" class="image1">

    Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS

    It might be worth using a div to style your text into a block or format it to look nice, etc. But you don’t need to do it

    http://www.w3schools.com/tags/tag_div.asp for div styling .

    And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it’s a great way to learn the basic tools you need to work with CSS and make your pages look good !

    Edit styling text

    <h1>first last</h1>
<p>Coffee snob.</p>

    so first you could style them in your css as the elements they are

    h1 
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}


p
{
text-align: right; 
}

    Doing thing your HTML would look exactly as it is you wouldn’t have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it’ll look exactly like whatever the above CSS is.

    The other option is to do what I suggested with the image and give them a unique class.

    p.body
{
text-align: right;
}

    Here you’ll need to add class to <p> jsut like you did for image which will look like

     <p class="body">Coffee snob.</p>

    Hope that helps !

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search