Semantic Html

“Semantic HTML” refers to the idea that all your HTML markup should convey the underlying meaning of your content—not its appearance.

Tag	Name	Definition & Usage
<header>	Header	represents a container for introductory content or a set of navigational links. Typically contains: one or more heading elements (h1 - h6) logo or icon authorship information
<nav>	Nav	Defines a set of navigation links. Notice that NOT all links of a document should be inside a <nav> element. This element is intended only for major block of navigation links.
<main>	Main	Specifies the main content of a document.The content inside it 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. Use one per document.
<article>	Article	Specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Examples: Forum post, Blog post, News story
<section>	Section	Defines a section in a document. It can be a section for the <main> content, a section inside an <article>
<aside>	Aside	Defines some content aside (as indirectly related) from the content it is placed in. Moslty used for sidebars, as sidebar are indirectly retaled content for the document as a whole. But when used inside the <article> tag it will define a indirectly related unit of the article's content.
<figure>	Figure	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the this element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
<figcaption>	Fig Caption	Defines a caption for a <figure> element. It can be placed as the first or last child of the <figure> element.
<footer>	Footer	Defines a footer for a document or section. Typically contains: Authorship information, Copyright information, Contact information, Sitemap, Back to top links, Related documents

Css combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

Selector	Example	Description
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that are places inmediately afer <div> elements
element~element	p ~ ul	Selects every <ul> element that are preceded by a <p> element

Relative Paths

A file path describes the location of a file in a web site's folder structure.

Path	Description
picture.jpg	The "picture.jpg" file is located in the same folder as the current page
images/picture.jpg	The "picture.jpg" file is located in the images folder in the current folder
/images/picture.jpg	The "picture.jpg" file is located in the images folder at the root of the current web
../picture.jpg	The "picture.jpg" file is located in the folder one level up from the current folder