Welcome to Carvalho's html quick reference guide,
the guide designed to help you quickly reference important html topics
and put your mind at ease today we'll be touching on headings particularly these guys
you use these tags if you want to add headings and or subheadings into your html document
notice that they are from h1 to h6 h1 is the biggest heading and refers to the heading
that's the most important h6 is the smallest and refers to the least important heading again
browsers here also tend to add margins of white space before and after heading now headings have
particular prominence in the sense that these are important for search engines to help with indexing
the framework and content of the web pages you make headings tend to improve neatness and give
structure to your document remember the h1 tag is to be used for those headings which are of utmost
importance and then you can move on to using h2 h3 and so on depending on the order of what you
consider to be important these are heading tags not tags to make text larger or bigger therefore
remember to keep these tags just for headings nothing else the size of these headings properties
they bestow can be altered by using css this isn't a css class but i'll demonstrate this
in our example remember to limit your usage of h1 to just once when working on an html document
this is a better practice at least in my opinion now let's work on visual studio code here
so as you can see here i have already got the h1 till the h6 tags shown
and we're going to check this out in chrome of course but initially let's just check this out
in chrome before we implement any css into this and what i could try doing is maybe i could try
including some paragraph tags into or rather in between these heading elements let's try that now
okay i've added the text in between the various heading elements now let's go and check this out
in chrome okay i'm back here in chrome and as you can see we've got the heading tags working
we've got h1 h2 h3 4 5 and 6 and we've got the paragraph tags that i've inserted in between and
you can see that it's all working now what we'll do is i'll just try to implement a little css
just to show this to you let's head back to visual studio code
i'm back here in vs code and what we'll do is what's really involved
with this is that you you would have to make use of an attribute known as style
now it's it's quite straightforward on how to enter this let's say i want to alter the
h1 tags style so what i'll do is i'll simply rather let's try h2
i'll just add the style attribute and you have to specify the font size for example to be
60 pixels or you you can even just do any other any other css property
so in this case i'm showing font size as 60 pixels what i could try doing is also
i could try changing the color let's try doing that maybe i'll make this
80 pixels and i'll add a color i'll add a color of chartreuse just to make it more obvious
and these are all css related terms so don't worry about knowing all these things right now but i
just want to make a point clear that you can alter the style of your headings and for now this should
be enough so let's just head over to uh i'm back here in chrome now i just need to reload the page
and you can see that it's working we've got the font size plus we've got the color all right
so this means that it's working and that's just about it in this uh lecture thanks for joining
me in this quick segment i hope i've helped you understand the cover topic well see you next time