HTML TAGS

DOCTYPE HTML

< !DOCTYPE html > it just basically telling the browser that the file to be load is a HTML document.

HTML TAG

< html > </html > it defines as a container and everything that inside html will run as markup language

HEAD TAG

< head > </head > it holds the related information about the document

TAGS THAT MUST BE INSIDE THE HEAD TAG

Meta tags

< meta > META TAGS provide the important information about the document here are sample of meta tags:
< meta charset="utf-8" > this meta tags tell the brower that the document is capable of handling all posible characters in unicode
< meta name="description" content="" > - this meta tags holds the description of the document and the intial information about the document
< meta name="viewport" content="width=device-width, initial-scale=1" > - this meta tag tell the brower that the content of the document is responsive or viewable

TITLE TAG

< title > </title > the value inside title tag will serve as the title of the document.

LINK TAG

< link rel="stylesheet" href="" > this link tag is capable of holding the CSS file. the rel="stylesheet" is signifies that the document to be pass is stylesheet. And the href=" " it holds the path of the CSS file.

BODY TAG

< body > </body > all elements inside body tag is render in the website as content of the website.

ALL THE TAGS ABOVE ARE ALL ABOUT THE PROPER STRUCTURE OF THE DOCUMENT

Tags for rendering content of a website

HEADING TAG

< h1-6 > </h1-6 > all the text inside the heading tag will show as a large text there's a lot of heading tags from h1 to h6, h1 is the largest and h6 is the smallest.

SAMPLE CODE

RESULT IN WEB

PARAGRAPH TAG

< p > </p > all the text inside paragraph tag will show as a normal text.

SAMPLE CODE

RESULT IN WEB

UNORDERED LIST TAG

< ul > </ul > It show the content in a bullet points list format and for every content must be inside a <li> tag li stands for List Item TAKE NOTE! bullet points can be change by setting the TYPE attribute of ul tag or via css styling.

SAMPLE CODE

RESULT IN WEB

ORDERED LIST TAG

< ol > </ol > It show the content in a order list format and for every content must be inside a <li> tag li stands for List Item TAKE NOTE! order can be change by setting the TYPE attribute of ol tag or via css styling.

SAMPLE CODE

RESULT IN WEB

HTML COMMENTS

< !-- -- > All the content inside dashes will be comment. comments serve as a guide for developers and it cannot be seen in the website

SAMPLE CODE

STRONG TAG

< strong > </strong> It makes the content in a BOLD format.

SAMPLE CODE

RESULT IN WEB

EMPHASIS TAG

< em > </em> It makes the content in a italic format.

SAMPLE CODE

RESULT IN WEB

UNDERLINE TAG

< u > </u> It makes the content have a underline.

SAMPLE CODE

RESULT IN WEB

SMALL TAG

< small > </small> It makes the text small.

SAMPLE CODE

RESULT IN WEB

LINE BREAK TAG

< br > Line break doesn't need a closing tag. It force the succeeding text to continue to the next line it can also stack up to add more spacing between elements

SAMPLE CODE

RESULT IN WEB

IMAGE TAG

< img > img tag doesn't need a closing tag. this elements used to display image. For image tag to be able to show image it must set the attributes src=" " the src attribute is capable to hold the path of the image, alt=" " the alt attribute holds the information to display if the image is not been display due to error, title=" " title attribute is capable to show the text when mouse is over the picture, width=" " width attribute resize the width of the image and height=" " height attribute resize the height of the image

SAMPLE CODE

RESULT IN WEB

ANCHOR TAG

<a> </a> anchor tag is capable for making a link in your website. The text inside your anchor tag will be the name for the link. if you click that name you will be directed to the website that you set in the href="" anchor tag attributes href=" " href holds the link for the anchor tag and title=" " it holds the text to show when you mouse over the link.

SAMPLE CODE

RESULT IN WEB

DIV TAG

<div> </div> is just a container that can holds different elements mostly likely it use for making the structure much readable

SAMPLE CODE

RESULT IN WEB

SPAN TAG

<span> </span> Span tag is basically same as div tag that signifies as a container but span tag is inline element which means it doesn't take the full width if you use 2 span you will see it display only in 1 row. While the Div tag is a block element it means it take the full width if you use 2 div Tags the content will display in a seperate row.

SAMPLE CODE

RESULT IN WEB

TABLE TAG

<table> </table> it display contents in a table format inside table tag there's some element to define to make the proper structure of the table. the thead tag < thead > < /thead > holds the head content of the table, the <tr> </tr> Table row this tag make a row for the table structure, <th> </th> this tag define the table heading it default the text inside is centered and bold text. The next table structure is <tbody> </tbody> Table body holds the information of the table and the <td> </td> Table Data it holds the data of the table in default the text inside td tag is left align

TABLE ATTRIBUTES

border="1px" give the table a 1px border, cellpadding="20px" give each data a 20px space inside the data and the cellspacing="20px" give each data a 20px margin space outside the data.

SAMPLE CODE

RESULT IN WEB

FORM TAG

<form> </form> Form tag use for creating a form for user inputs

FORM ATTRIBUTES

ELEMENTS INSIDE FORM TAG

<label></label> Label element will the label or name for the input <input type=" " > type attribute define what kind of type the input will be examples for type attribute value are text, date, number, button, submit, reset, radio, checkbox and etc. < textarea cols="" rows="" > </textarea> cols and rows attributes define the size of the textarea. <select> </select> Select element display a dropdown selection inside select element is the option element it serve as a choice

SAMPLE CODE

RESULT IN WEB

NAV TAG

<nav> </nav> Nav tag used to display navigation of a website

ELEMENTS INSIDE NAV TAG

SAMPLE CODE

RESULT IN WEB