#HTML Tags and Syntaxes
Tags are elements surrounded by angle brackets. like
<tagname>content</tagname>
They normally come in pairs which are the starting and ending tag. the end tag is usually the same but has a forward slash.
<tagname> Starting tag
</tagname> Ending tag
There are a very few tags that are self closing. that means they have no ending tags.
like <br />, <hr />, <img />, <input /> etc.
Tags are elements surrounded by angle brackets. like
<tagname>content</tagname>
They normally come in pairs which are the starting and ending tag. the end tag is usually the same but has a forward slash.
<tagname> Starting tag
</tagname> Ending tag
There are a very few tags that are self closing. that means they have no ending tags.
like <br />, <hr />, <img />, <input /> etc.
<!DOCTYPE html>
Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly. While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules. Because we are using the html 5 and the most popular one, the way we declare the document is <!DOCTYPE html>
Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly. While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules. Because we are using the html 5 and the most popular one, the way we declare the document is <!DOCTYPE html>
As you can see in the picture everything is wrapped in an html tag except the document declaration tag, which is exceptional. and we have two main tags inside the html tag.
1. Head tag
Mostly it is used to write web page titles, information of the website(metadata), link things mainly a stylesheet(a topic for soon coming articles)
2. Body tag
This is the tag where all major things are coded. Like the header, sections, footer and any other thing that we want to display.
1. Head tag
Mostly it is used to write web page titles, information of the website(metadata), link things mainly a stylesheet(a topic for soon coming articles)
2. Body tag
This is the tag where all major things are coded. Like the header, sections, footer and any other thing that we want to display.
#Headers
There are six types of headers based on the font size of the text. h1 - h6. making h1 the biggest text and h6 the smallest one.
There are six types of headers based on the font size of the text. h1 - h6. making h1 the biggest text and h6 the smallest one.
#Paragraphs
They are just a normal texts. You just have to wrap the thing you want with the "p" tag. Just like <p>this is an article from programming diaries</p>
A little tip: To generate a random paragraph or a dummy text on sublime text and a few other text editors you just have to write "lorem" and hit tab on your keyboard.
They are just a normal texts. You just have to wrap the thing you want with the "p" tag. Just like <p>this is an article from programming diaries</p>
A little tip: To generate a random paragraph or a dummy text on sublime text and a few other text editors you just have to write "lorem" and hit tab on your keyboard.
#Lists
There are two types of lists
1. Ordered Lists
These type of lists are basically represented by ol tag. they display the list written with numbers.
2. Unordered Lists
These type of lists are represented by ul tag. and they display the list written with dots. And the dots can be removed by CSS.
N.B: To display the lists you have to use another tag inside the ol or ul tag. called list tag. which is represented by li. So if you want to display a list of fruits you will write you code like.
for the ordered list
<ol>
<li>Banana</li>
<li>Oranges</li>
<li>Pears</li>
<li>Strawberries</li>
</ol>
for the unordered list
<ul>
<li>Banana</li>
<li>Oranges</li>
<li>Pears</li>
<li>Strawberries</li>
</ul>
There are two types of lists
1. Ordered Lists
These type of lists are basically represented by ol tag. they display the list written with numbers.
2. Unordered Lists
These type of lists are represented by ul tag. and they display the list written with dots. And the dots can be removed by CSS.
N.B: To display the lists you have to use another tag inside the ol or ul tag. called list tag. which is represented by li. So if you want to display a list of fruits you will write you code like.
for the ordered list
<ol>
<li>Banana</li>
<li>Oranges</li>
<li>Pears</li>
<li>Strawberries</li>
</ol>
for the unordered list
<ul>
<li>Banana</li>
<li>Oranges</li>
<li>Pears</li>
<li>Strawberries</li>
</ul>
Inline VS Block Level Elements
The Inline Elements are tags that doesn't start on a new line when they are used. and they take only the necessary width.
The Block Elements are tags that start on a new line when they are used. and they take as much width as they can.
Example for Inline Elements: Links(<a>), img(<img>), line break(<br>) etc
Example for Block Level Elements: <div>, Headers (h1-h6), Lists, Table etc
The Inline Elements are tags that doesn't start on a new line when they are used. and they take only the necessary width.
The Block Elements are tags that start on a new line when they are used. and they take as much width as they can.
Example for Inline Elements: Links(<a>), img(<img>), line break(<br>) etc
Example for Block Level Elements: <div>, Headers (h1-h6), Lists, Table etc
The <div> element or tag
It is mostly used as a container for the other HTML elements. There are no required attributes, style, class and id are common.
It is mostly used as a container for the other HTML elements. There are no required attributes, style, class and id are common.
#HTML links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand. To show links on HTML an "a" tag is used.
<a href="url">Link text</a>
For example: <a href="google.com"> Visit google.com </a>
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand. To show links on HTML an "a" tag is used.
<a href="url">Link text</a>
For example: <a href="google.com"> Visit google.com </a>
#Attributes
All tags can have attributes, it is mostly used to provide information about an element. they are always place on the starting tag.
<tagname attributename="attributevalue">content</tagname>
For example: <h1 title="My Company"> About Us</h1>
All tags can have attributes, it is mostly used to provide information about an element. they are always place on the starting tag.
<tagname attributename="attributevalue">content</tagname>
For example: <h1 title="My Company"> About Us</h1>
#Forms
We usually see a login or signup form in most websites. they were all build with HTML and then styled with CSS and other programming languages are used to make it dynamic. It is pretty easy to make a form. you basically need to know two tags to make a basic form. The label and input tag. First you will have to create a form tag.
<form></form> So the label and input tag will go inside the form tag. you will have to use a type attribute on the input tag to show the browser the type of data the user should enter.
We usually see a login or signup form in most websites. they were all build with HTML and then styled with CSS and other programming languages are used to make it dynamic. It is pretty easy to make a form. you basically need to know two tags to make a basic form. The label and input tag. First you will have to create a form tag.
<form></form> So the label and input tag will go inside the form tag. you will have to use a type attribute on the input tag to show the browser the type of data the user should enter.
image_2020-11-13_14-57-07.png
2.2 KB
This is what the output of the code will look like when the data is entered. They are all in the same line because. inputs and labels are inline Elements. we would have to wrap them inside a block level element like a div. to display them on their own line.