Welcome to Code Junction. If you are new to learn web development, and want to learn html, this is the perfect blog for you. In this article, we will learn Few HTML Tags. Get ready for learning.
<html>
<html> declares the document type and version. It signifies the beginning of an HTML document, indicating to the browser that the content following it should interpreted as HTML.
<!DOCTYPE html>
<html>
<!-- Write Code here -->
</html>
<head>
<head> tag is a compulsory element in HTML documents, located before the <body> tag, used to contain metadata, document title, character encoding declarations, and links to external resources such as stylesheets and scripts. Meta tags help to score SEO.
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body> tag in HTML represents the main content of a web page, containing all the ocntent that is directly visible to the user, including text, images, videos, and interactive elements. It located after <head> tag.
<body>
<h1>Welcome to Code Junction</h1>
<p>Wish you all the best for learning</p>
</body> Headings (<h1>, <h2>, ... <h6>)
Heading elements define the headings or titles of Sections within a document. There are six levels of heading elements, represented by the tags <h1> through <h6>, where <h1> is the highest level and <h6> is the lowest. Headings provide semantic structure to the content, with <h1> typically denoting the main heading or title of the web page and subsequent levels <h2> through <h6> representing subheadings of decreasing importance. THese elments help organize and hierarchically structure the content, aiding in readabilit, accessibility, and search engine optimzation. It is so helpfull for SEO.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <p>
<p> tag represents a paragraph. It used to define a block of text or content within a document. It represent a clear sepraration between differrent paragraphs, aiding in the organization and redability of textual content.
Attribute:
- align: specifies the alignment of the paragraph (left, center, right, justify).
<p>This is a simple paragraph with info</p>
<p align="left">Left Align Peragraph</p>
<p align="center">Center Align Paragraph</p>
<p align="right">Right Align Paragraph</p><a>
<a> tag in the HTML use to create hyperlinks, allowing users to navigate between web pages or different sections within the same page. It allow users to navigate between web pages or sections within the same page. It is an essential element for creating interactive and navigatble web content, enhancing user experience and facilitating information retrieval on the internet.
Attributes:
- href: specifies the URL of the linked page or resource.
- Target: Specifies where to open the linked document (self, _blank, _parent, _top)
- Title: Provides additional information about the linked content when hovered over.
- rel: Specifies the relationship between the current document and the linked document.
<a href="https://codejn.com" title="Code Junction | Official Website">Visit Codejn Junction </a>
<a href="https://codejn.com" target="_blank" title="Code Junction | To Learn Programming Click Here">Visit Codejn Junction (Open link in new tab)</a>
<a href="https://codejn.com" target="_self">Visit Code Junction Website (Open link in the same tab)</a>
<a href="https://codejn.com" target="_parent">Visit Codejn Website (Open link in the parent frame)</a>
<a href="https://codejn.com" target="_top">Visit Codejn Website (Open link in the full body)</a>
<img>
<img> tag in HTML is used to embed image into web page. It is self closing tag and requires some attributes to define the image as source (src) and alternative text (alt). Additional attributes can be used to customize the image's appearance and behaviour.
Attributes:
- src: specifies the URL (Uniform Resource Locator) of the image.
- alt: provides alternative text for the image, which is displayed if the image cannot be loaded or for accessibility purposes, it also help in SEO.
- width: specify the width of the image in pixels (width="300") or can add in percentage(width="50%").
- height: specify the height of the image in pixels or in percentage.
- title: adds a tooltip that appears when the user hovers over image.
- border: add the border width around the image.
- align: define the alignment ('left' , 'right' , 'top' , 'bottom' , 'middle' ) of the image .
<img src="image.jpg" alt="description for image or alternative text for image" />
<img src="image.jpg" width="300">
<img src="image.jpg" height="200">
<img src="image.jpg" title="Title for iamge">
<img src="image.jpg" border="1">
<img src="imag.jpg" align="left">List
List in HTML is a collection of items presented in a particular order. List can be used to display information in a structured format, making it easier for user to understand and navigate content. Lists can be displayed with bullet points or numbering to viusally distinguish individual items and denote their sequence or significance. It has two types: Unordered List and Order List.
Unorder List(<ul>):
In unordered list, each item represented by a bullet point(•). In this order of the items is not important.
Attributes:
- type: specify the type (disc, circle, square) of bullet used for the list items. Default is disc.
Ordered List(<ol>):
In ordered list, each item is numbered or otherwise sequentially marked. It is used when the order of the items is important.
Attributes:
- type: specify the type of ordered list marker.
- start: specify the counting start from in list.
<!- Unordered List -->
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<!- Unordered List with bullet type (square / disc) -->
<ul type="square">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul> <!- Ordered List with type (1 / a / A / I / i / ) -->
<ol type="1">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ol> <!- Orered List with start tag to start from specific counting -->
<ul start="5">
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul> <!- Ordered list with reverse -->
<ol reversed>
<li>Third Place</li>
<li>Second Place</li>
<li>First Place</li>
</ul><div>
`<div>` tag is a block element used to create a division in web page. It is used to group and style content within web page.
Attributes:
- title: adds a tooltip that appears when the user hovers over div.
<div title="Main Content">
<h2>Welcome to Code Junction</h2>
<p>This is the main content area of the website.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div><span>
The `<span>` tag is inline element used to group or style content over web page.
<p>This a s <span style="color:red;">red</span> word</p>Explore the Introduction of HTML tutorial on Code Junction to get to know more about basics of HTML. Enhance your understanding of web development by learning foundational concepts. Begin your HTML journey now!
Post a Comment
0Comments