Web Development Tutorial | HTML5, Headings

Articles, Blog

Web Development Tutorial | HTML5, Headings

Web Development Tutorial | HTML5, Headings


hi guys welcome to another tutorial I am
Iosef Bodnar and I invite you for another web development tutorial this tutorial
has the goal to talk about headings in html5 the headings are used to organize
and structure web page they’ve got six levels each level has a decreased
importance how the number of level is bigger so it starts with h1 and
finishing with h6 I give you an example for example h1 is the most important
heading level followed by H 2 which is less important than h1, h3 is less
important than h2, but is much less important than h1 and so on, therefore when you are gonna to use headings to organize and structure your web page you
have to develop a strategy around that headings and not to use them to set the
size of text or of the characters to set the size of text you have to use CSS
namely cascading style sheet I’m going to give you an example so I’m going to
resize this editor brackets and I’m gonna give a left click on this
icon in order to release my default browser which is Google Chrome before
I’m going to talk what appeared on this webpage I’d like to tell you that I
create before this tutorial a file named headings dot HTML in order to create a
file in brackets editor you have to go here on this panel left side click right
on your mouse and select new file in this box write the name of the file dot
HTML so the file must have this extension HTML anyway I did in this file
the structure of a web page which have to start with this doctype followed by
HTML element head and body this four HTML elements made up the structure of a web
page I have done two tutorials regard to the structure of a website and my very
first web page if you don’t know anything about the structure of a web
page I suggest you to watch that tutorial so anyway you do as you want and I go further so I release in my default browser google chrome the
content of this file and all what it is placed here inside this body element
will appear on a web page and as you can see even I haven’t used any HTML
elements or tags this text was appeared on web page and maybe you are wondering
why I have to use the HTML elements or tags if the text or what I have written
inside the body element appears on website without using these HTML tags
yeah that’s right the browser’s regardless of the browser even you don’t
to use any HTML tags they will display the content of your HTML 5 I mean what
you are going to place inside this body element on a web page even you don’t use
any HTML elements so they are quite tolerant so these browsers but in the
other hand you can’t understand anything regard to what it was displayed on this
this web page actually here is a mess and this paragraph is not understandable
you can’t understand anything here and there are no visitor will read this so
this is the main reason because you have to use
HTML elements when you went to build a website because the HTM elements will
help you to organize to structure and to format your webpage to be understandable
one of these elements are headings as I told you so let’s use here for this text
web development h1 heading level I’m going to cut this text web development
and paste it here inside h1 element and here you go if you look over on the left
side you will realize straight away that this text was changed
this board is highlighted and the text the size of the characters are bigger
because I use this HTML element namely h1 so this is the most important heading
element heading level and that’s why we have in
this way displayed this text web development and now this paragraph
started to be understandable now the visitor or the reader you will
know this is a title so beginning with using this h1 heading level this web
page started to be understandable for html5 I’m going to use h2 cut and paste inside h2 element and here
you go now you know that this html5 belongs to web development and you can
notice that the size of this text HTML 5 is smaller than web development why
because for this text html5 I used as you can see here h2 which is
another level of heading is less important
heading level than h1 why I have done like that because html5 belongs to web
development and in this way the visitor will realize this that the html5 is part
of web development now I go further and here where is these headings I’m going
to write h3 I’m going to do the same thing cut and paste I go further here h3 page 3 now I hear should be h2
sorry about this so h2 cut and paste yeah it’s going to be h3 again h3 here again h2 again H 3 and H 3 here you go
now this page looks much better is understandable is readable everyone who
will come up on this webpage will be happy to read it to visit it because the
page is good structure and good organised so this is the main using of
this headings element and the another think of using this heading element is
that they have levers and how the number of level is speaker the importance is
decreased this helped us to develop a strategy so you have to develop a
strategy around these headings so now we know html5 belongs web development this
is the main title of this page and CSS as well belongs web development because
as you can see I use the same level the same heading level for html5 CSS and
JavaScript and these three you can realise that they belonged to a web
development they follow as importance after web development headings
paragraphs are part of html5 because I use this h3 level for
both of them and you can realize that headings and paragraphs are part of
html5 and so on colours and box model belongs to CSS and syntax and
introduction belongs to Java Script so when you want to use headings you have
to develop a strategy around these headings last thing what is going to
happen if you don’t use properly the headings if I’m going to write here for
example where h5 look here on the left side so this html5 the size of the
text of the font is much smaller so this is a mess
you can’t realize now that is html5 belongs to web development yeah so here
you should use h2 now this is very obviously that html5 belongs to web
development to set the size of text you must use CSS so that’s all about
headings thank you for watching this video tutorial I’m waiting for you for
watching my other video tutorials and maybe to follow this web development
series thank you see you next time

Leave a Reply

Your email address will not be published. Required fields are marked *