CODEWITHSUNDEEP
csshtml
user1052448
user1052448

Reputation: 433

Proper use of HTML5 elements

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.

Upvotes: 0

Views: 38

Answers (2)

Spooler
Spooler

Reputation: 232

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 !

Upvotes: 1

Elipzer
Elipzer

Reputation: 911

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.

Upvotes: 1

Related Questions