HTML Tags:
HTML tags are used to define elements within a web page. They are enclosed in angle brackets (< >) and usually come in pairs: an opening tag and a closing tag. The opening tag signifies the beginning of an element, while the closing tag indicates its end. Some elements, like <img> and <br>, are self-closing and don't require a separate closing tag.
Example 1: Heading Tags (<h1> to <h6>)
Heading tags are used to define headings of different levels on a web page. The <h1> tag represents the main heading, while <h2> to <h6> represent subheadings of decreasing importance.
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Subheading 2</h3>
<h4>Subheading 3</h4>
</body>
</html>
In this example,
<h1> defines the main heading, <h2> defines a subheading, and so on. Each tag signifies a different level of importance in the document structure.
Example 2: Paragraph Tag (<p>)
The <p> tag is used to define paragraphs of text on a web page.
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is a paragraph of text.</p>
<p>Another paragraph goes here.</p>
</body>
</html>
In this snippet, <p> defines two separate paragraphs. The browser renders them as distinct blocks of text with vertical spacing between them.
Example 3: Anchor Tag (<a>)The <a> tag is used to create hyperlinks to other web pages or resources.
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
Here, <a> creates a link to "https://www.example.com". The href attribute within the <a> tag specifies the destination URL.
HTML Attributes:
Attributes provide additional information or settings for HTML elements. They are added within the opening tag of an element and are written as name-value pairs. Attributes modify the behavior or appearance of elements.
Example 1: Image Tag with src Attribute (<img>)
The <img> tag is used to display images on a web page. The src attribute specifies the URL of the image.
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<img src="image.jpg" alt="Example Image">
</body>
</html>
In this example, <img> displays an image named "image.jpg". The alt attribute provides alternative text for screen readers and browsers that cannot display images.
Example 2: List Tags with type and start Attributes (<ol> and <ul>)
The <ol> and <ul> tags are used to create ordered and unordered lists, respectively. The type attribute in <ol> specifies the type of list marker, and the start attribute sets the starting number for an ordered list.
Copy code
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<ol type="I" start="5">
<li>Item 5</li>
<li>Item 6</li>
</ol>
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
</body>
</html>
In this code,
<ol> creates an ordered list starting from 5 with Roman numeral markers. <ul> creates an unordered list with bullet points by default.
Example 3: Input Tag with type Attribute (<input>)
The <input> tag is used to create interactive form controls. The type attribute specifies the type of input control, such as text, checkbox, radio button, etc.
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Input Example</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this form example, <input> creates text and password input fields with the type attribute specifying their types. The name attribute provides a name for each input field, which is used when processing form data.
Practice Excercise Practice now