DEV Community

Ayman Maher
Ayman Maher

Posted on

Back to web development basics #1

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 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:
    > main
    > section
    > article
    > aside
    > nav
    > footer
    > header
    > blockquote
    and sure the usual suspects p ul ol li a h1---h6 for reference check MDN
Breaking down elements
> main
main is used as a container for the main content which is directly related to your topic
___
> section
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
___
> article
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
___
> aside
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
___
> nav
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
___
> header
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...
___
> footer
footer is used at the end it usually contains information about the author, copyright data, contact information, etc...
___
> blockquote
blockquote is to represent a quote and is given a margin from the side and placed between quotes

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

Top comments (0)