Laura23n
2/27/2018 - 6:16 PM

Componente principale ale unui site

MAIN se foloseste o singura data pe pagina, la continutul principal. intotdeauna se da modifier class la componentul principal. se adauga container daca sunt mai multe componente de inclus in el. NAV e doar parintele logic. Exista un singur NAV pe sectiune intr-o pagina. se da un singur CLEARFIX in jurul tuturor elementelor care au float. ARTICLE=blog, se dezbate ceva. SECTION e de ex "What we do".

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript. 
For cases like these, HTML provides the <div> and <span> elements. You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.

    1. <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. 
    Ex: <p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>

    2. <div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning.
    
  1. <main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements.
  
  2. <article> encloses a block of related content that makes sense on its own without the rest of the page 
  (e.g. a single blog post.)
  
  3. <section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g. a mini map, or a set of article headlines and summaries.) It's considered best practice to begin each section with a heading; also note that you can break <article>s up into different <section>s, or <section>s up into different <article>s, depending on the context.
  
  4. <aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.)
  
  5. <header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings.)
  
  6. <nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.
  
  7. <footer> represents a group of end content for a page.
  
  
In your HTML code, you can mark up sections of content based on their functionality. To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

    - header: <header>
    - navigation bar: <nav>
    - main content: <main>, with various content subsections represented by 
        <article>, 
        <section>, and 
        <div> elements
    - sidebar: <aside>, often placed inside <main>
    - footer: <footer>
    
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

      1. Header
Usually a big strip across the top with a big heading and/or logo. This is where the main common information about a website usually stays from one webpage to another.

        2. Navigation bar
Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having an inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than a individual component, but that's not a requirement; in fact some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

        3. Main content
A big area in the center that contains most of the unique content of a given webpage, for example the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!

        4. Sidebar
Some peripheral info, links, quotes, ads, etc. Usually this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.

        5. Footer
A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place to put common information (like the header) but usually that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.
<div class="site">
  <header class=”site-header”>
    <div class="wrap">
      <div class="clearfix">
      
        <div class="float-left">...</div>
      
      </div> <!--end .clearfix--!>
    
    </div> <!--end .wrap--!>

  </header>




<main class=”site-main”> 
	<section class=”section”>*X
		<div class=”wrap”>
			<h1>...</h1>
			<p>…
	</section>
</main>
<footer class=”site-footer”>…</footer>
</div> <!--end site-->