HTMLP R I S C I L A C N G

basics and good practices for developers

FRONT-ENDIS NOT THAT

EASYC O M P A N Y . C O M

BASICELEMENTS

THATEVERYONE

KNOWS

MEANWHILEIN HEADER

HOW TOPROPERLYSEPARATEELEMENTS

not with <br>

DIV SPANW H E N T O U S E

A block-level elementalways starts on a newline and takes up thefull width available

An inline elementdoesn't start on a new

line and only takes up asmuch width as necessary

h1, h2, h3, h4, h5, h6

form

ul

p

div

button, input, select

small, strong

img

a

span

BLOCKELEMENTS

"INLINE"ELEMENTS

A semantic element clearlydescribes its meaning toboth the browser and thedeveloper

LET'S TALKABOUTSEMANTIC

HOW TOPROPERLY USE

SEMANTICTAGS

not for their display properties

HOWTO

FORM

H O W T O F O R M

OTHER FORMELEMENTS

O T H E R F O R ME L E M E N T S

OTHERFORM

ELEMENTS

O T H E R F O R ME L E M E N T S

It is a new version of theHTML, with new elements,attributes, behaviors, and alarger set of technologiesthat allows more diverseand powerful Web sites andapplications.

WHATABOUT HTML5

INPUT NEW

O T H E R F O R ME L E M E N T S

color, date, datetimedatetime-local, emailmonth, number, rangesearch, tel, time, url, week

datalistoutput

HOWTO

HEADER

H O W T O H E A D E R

HOWTO

CONTENT

H O W T O C O N T E N T

HOWTO

LIST

H O W T O L I S T

HOWTO

TABLE

H O W T O T A B L E

HOW TOFOOTER

H O W T O F O O T E R

http://bit.ly/1exYIWj

http://bit.ly/1bfAZGt

https://mzl.la/1qTSVwu

THATREFERENCE

THANK YOUVERY MUCH

priscilacng

E A G E N T E S E V Ê P O R A I