Back to web development basics #1
Tags: html, css, beginners
Published: 2020-06-28 19:51:06

###This will be a series to cover basics of html & css

####Index

1- Introduction
2- HTML Elements
3- Notes 

####1- Introduction
- This will be a series covering the basics of HTML and css for developers with basic knowledge which will take you up a notch,this is not a course.
- For a course try [Codecademy](https://www.codecademy.com/) it has a course that was great when i tried it. 
- Not all elements will be covered only the ones i feel necessary from my point of view to beginner developers

___

####2- HTML elements (sectioning elements)

In today's post i will cover a part of the basics for HTML elements  
- HTML have an element for every usage, meaning div is not the answer
- div is a general purpose element used for grouping other elements or styling
- there are many elements that better describe where you are and what the content will be for example:
<dl>
  <dd> > main </dd>
  <dd> > section</dd>
  <dd> > article</dd>
  <dd> > aside</dd>
  <dd> > nav</dd>
  <dd> > footer</dd>
  <dd> > header</dd>
  <dd> > blockquote</dd>
</dl>
 and sure the usual suspects p ul ol li a h1---h6
for reference check [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

##### Breaking down elements

<dl>
  <dt> > main</dt>
  <dd>main is used as a container for the main content which is directly related to your topic
  </dd>
___

  <dt> > section</dt>
  <dd>section is used for content that can stand alone and is not proper to be used under any other element and sometimes it doesn’t make sense out of the context of the page
  </dd>
___

  <dt> > article</dt>
  <dd>article is used when a content peace can be taken away and placed in another page and would be totally independent, think of it as an article in a news paper that can be placed on any page and it makes sense on its own
  </dd>
___

  <dt> > aside</dt>
  <dd>aside is used for any content or info that is not related to the page content, its not certainly place on a side it might be in the middle of the page like an advertisement for example  
  </dd>
___

  <dt> > nav</dt>
  <dd>nav is used for the navigation inside the website or to other websites whether its placed on the top or on the side as long as it holds the navigation links
  </dd>
___

  <dt> > header</dt>
  <dd>header have to be cleared is not the head or the heading, head element is used to hold the links to css, meta, title etc... and the heading is the h1--h6 elements, but a header is the first thing presented in a page whether it holds a heading or a navigation bar or search bar, etc...
  </dd>
___

  <dt> > footer</dt>
  <dd>footer is used at the end it usually contains information about the author, copyright data, contact information, etc... 
  </dd>
___

  <dt> > blockquote</dt>
  <dd> blockquote is to represent a quote and is given a margin from the side and placed between quotes
  </dd>
</dl>
 
___

####3- General notes
- A header and a footer can be used inside section, article, main or whatever element you feel needs a header and a footer not only at the beginning or the ending of the body

- Understanding html elements eases the reading of the code and understanding where everything stands

- Next post i will discuss Forms