HTML5 Tutorial 5 - Display types Video Lecture - HTML5 from Scratch - Software

welcome to my channel internet glad to
have you my name is Travis Nilsson this
is dev tips for designers a place where
we talk about how to make the internet
go you're watching the fifth video in a
series I call html5 basics previously
we've talked about the history
physiology philosophy and anatomy of
html5 in the video previous to this we
talked about how to build an HTML tag
and discuss some of the most common HTML
tags so if you haven't watched those
videos I recommend that you do they lay
a great foundation for today's topic
however they're not required for you to
understand what we're talking about
you should watch them as I said so and
I'm the boss to you so in this video I'm
going to talk about something inherent
HTML tags display types display types
define how the taggers will behave when
they're rendered in the browser now we
can change this behavior anytime with
style sheets but it's important to know
the default behavior of the specific
tags that we're going to use there are a
lot of different types but we're going
to concern ourselves mainly with three
display styles today the first type of
element we're going to discuss is block
level elements so a block level element
right here is a they call block level
element because it kind of just act like
you'd expect a big Oh huh it's harder
than it looks they're a big blocks and
they start they start new lines whenever
you make a new block level inherent in
the structural idea is that the block
level elements create larger structures
than inline elements block level
elements may contain inline elements and
other block level elements an example of
that is a pee tag this
what's so stupid an example of that is
this P tag here which forces the layout
to separate the paragraph so that the
newest paragraph will start on the next
line under in the layout or in other
words the next block
check out the notes below for a link to
a list of all of the block level
elements in HTML the next type of
element is called in or in oh why oh
this one smells like cherries inline
inline elements contain only data and
other inline elements whereas block
level elements are larger structures
that contain all kinds of crap by
default inline elements do not create a
new line when rendered in the browser an
example of this would be a tag inside of
your paragraph where the a creates a
link or a hyperlink inside of the
paragraph but it doesn't create a new
line or a new paragraph or a new block
it just sits in line when we get to
styling our websites will take a note
that inline elements cannot take with
height margin or padding styles
interesting okay the last display type
I'm going to talk about today is called
wine -
even smells like trees in wine block
that's an L that's to see the last okay
so this one's called inline block inline
block is a strange but handy one they
sit in line with the content similar to
an inline display type but they can have
the characteristics of a block meaning
that they can have proportion width
height they can have padding and margin
but it sits in line adjacent to other
content there's only two tags that have
inline block as our default display type
that's images and buttons but remember
that as will show later on with CSS we
can turn any type into any this is an
arrow any other one that we want with
the magic of styling this looks so
ridiculous now there are other display
types that have their little display
quirks things like display table and
even display:none and there are also a
lot of interesting options on the
horizon with css3 right now but today we
just want to talk about how the default
HTML tags carry certain display types by
default a block inline or inline block
now because this is such a strange video
I don't I don't know what I'm doing I've
included links down below in the
description it'll give you a better idea
what we're talking about please read
through those and get familiar with this
idea of default display types and again
at this point you should be trying to
use these things on your own the only
way to get good at codes is to make
codes and to make a lot of codes alright
that's it but check out the videos that
came before this for a little bit more
context this is a series of videos I
call html5 basics they'll give you a
great foundation for what the little
what all this was alright hopefully next
week we're going to take a look at
specific tags that are new to html5 and
they are exciting and probably what
you've been waiting for so if you've had
fun watching this video if you or even
if you hated it probably I don't know
don't be shy leave some comments down
below I promise I read every one I'm
just looking for feedback on the format
of this channel I'm just playing it by
ear as I go deciding to write on my face
happen two minutes ago and I don't I
don't know I doubt that I'll ever do
this again
maybe next time I'll use chocolate and
as always if you haven't yet please
share and do not do do Tim Tim don't you
subscribe to my channel and ain't look
good where you can watch dev tips for
designers dr. Tim returned in Denton
terilyn Tim Tim Tim who you gonna call