HTML ELEMENTS, ATTRIBUTES, HEADINGS AND PARAGRAPHS
In this tutorial, we shall look into the HTML elements, attributes, headings and paragraphs.
HTML ELEMENTS
- Everything from start tag to end tag including content between tags called as HTML ELEMENTS.
- Syntax- <tagname> content </tagname>
Example:
- <h1> content </h1>
- <p> content </p>
HTML EMPTY ELEMENTS
- There are some no content elements as well these elements are called as empty elements.
- Empty elements do not have end tags.
Example:
- <br>
- <hr>
NESTED HTML ELEMENTS
- Html elements which are inside other elements are called NESTED HTML ELEMENTS.
- Every HTML document contains Nested html elements.
Example:
Explanation:
- HTML5 version is declared with <!DOCTYPE html>
- HTML starts with the tag <html> and ends with </html>. And every element is nested in this tag.
- All Body of the html is written between <body> and </body>
- Inside <body> we have <h1> and <p>
- <h1>Defines a heading. It start with <h1> and end with</h1>
- <p> Defines a paragraph in HTML. it starts with <p> and end with </p>
HTML ATTRIBUTES
- Almost all html elements can have Attributes.
- Attributes are used to give additional information about elements.
- Attributes are always specified in the start tag of the elements.
- Usually Attributes come in name and value pairs.
href Attribute
- Anchor tag <a> contains a href attribute which is used to define a hyperlink.
- Href attribute is used to specify the url of the page when that link goes to.
Example:
HTML CODE:
Output:
src Attribute
- Image tag contains a src attribute which is used to define the source/path of the image.
- There are two ways to specify the path of the image.
- Absolute URL : This is a type of link where you will specify the path of the image from the other website.
Example: src=”https://https://roboticelectronics.in/images/img_logo.jpg”
- Relative URL: This is a type of link where you will specify the path of the image from the same hosted website.
Example:
src=”img_logo.jpg”
- It is preferred to use relative url because if you use absolute url it is linked to another website so there might be copyright.
Example:
HTML CODE:
Output:
Width and Height Attributes
- Image tag contains width and height attributes.
- These attributes are used to define the width and height of the images (in pixels,rem,vm,vh).
Example:
HTML CODE:
Output:
alt Attribute
- Image tag contains alt attributes.
- alt Attribute specifies the alternate text if the image is not displayed.
Example:
HTML CODE:
Output:
Style Attribute
- Style attribute is used to style the element such as color, size .etc.
Example:
HTML CODE:
OUTPUT:
HTML HEADINGS
- There are 6 different HTML Headings, they are defined with the <h1> to <h6> tags.
- <h1> heading is bigger in size as well as used to define the most important heading.
- <h6> heading is smaller in size as well as used to define the least important heading.
- The size of heading decreases from h1 to h6.
- HTML Headings are very important because when users search for something, search engines use headings to give results.
- HTMl headings sizes can also be edited with style attribute by using css property font-size.
- Usually <h1> tag is used for main headings , and some less important <h2> and so on
Example:
HTML CODE:
Output:
From the above photos you can identify that different headings have different sizes and different importance levels.
HTML PARAGRAPHS
- <p> This tag is used to define a HTML paragraph.
- Before and after paragraph elements there will be white space.
Example:
HTML CODE
OUTPUT
HTML DISPLAY
- Different screens have different alignments and different results.
- Extra spaces cannot be added in an HTML document in order to get spaces in a webpage.
HTML HORIZONTAL LINES
- <hr> tag is used to give a thematic break in an HTML Page.
- <hr> tag gives a horizontal line in the HTML Page.
- It separates content in an HTML Page.
- <hr> tag does not have end tag because it is a empty tag
Example:
HTML CODE:
OUTPUT:
HTML LINE BREAK:
- <br> tag is used to give a break.
- For example you want to start a sentence in a new line then use a break tag then the sentence will start in the next line.
- <br> tag does not have an end tag because it is an empty tag.
Example:
HTML CODE:
OUTPUT:
pre Tag
- <pre> tag defines the preformatted text.
- The text inside <pre> and</pre> if we give space inside these tags the same thing is displayed on the web page.
Example:
HTML CODE:
OUTPUT:
In this tutorial we have learnt HTML Elements, HTML Attributes, HTML Headings, HTML Paragraphs.
For any sort of doubts or the questions, you can reach out through the comment box. In the next tutorial you will learn,
Detailed explanation on
- HTML Styles.
- HTML Formatting.
- HTML Quotations.
Related Tutorials