Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Introduction to HTML and CSS (2016) Make It Beautiful With CSS Select and Style by Class

What are the functions of tags <main> and <div> in line number 27 and 28

I didn't get whats the purpose and functions of <main> and <div> tags.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Jane Smith's Profile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head> <body>

<div class="main-nav">
    <ul class="nav">
      <li class="name">Jane Smith</li>
      <li><a href="#">Home</a></li>
      <li><a href="resume.html">Experience</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

<header>
  <img src="images/me.png" alt="Drawing of Jane Smith" class="profile-image">
  <h1 class="tag name">dddddd.</h1>
  <p class="tag location">fffffff.</p>
</header>

<main class="flex">
  <div class="card">
    <h2>Background</h2>
    <p>I’m an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic looking websites.</p>
    <p>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</p>
    <ul>
      <li>To learn more, <a href="resume.html">view my resume.</a></li>
    </ul>
  </div> 

  <div class="card">
    <h2>Goals</h2>
    <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
    <ul class="skills">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Ruby</li>
      <li>Rails</li>
    </ul>
    <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
  </div> 

</main>
<footer>
  <ul>
    <li><a href="#" class="social twitter">Twitter</a></li>
    <li><a href="#" class="social linkedin">LinkedIn</a></li>
    <li><a href="#" class="social github">Github</a></li>
  </ul>
  <p class="copyright">Copyright 2015, Jane Smith</p>
</footer>

</body> </html>

2 Answers

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

The main use definition is this on web3schools

Definition and Usage The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

<div> tags are used to divide the HTML content up as needed so that you can then use these (and the classes / ids) you add to them to style the page using css laster on.

http://www.w3schools.com I find this site helpful for clarification of terms.

Hope that helped.

Sorry for being stupid, but can you explain in layman terms?

Emilio Sánchez
Emilio Sánchez
2,450 Points

the main is like the body of the html and the div is a box to design one part of your html