Doctype Declaration:
The doctype declaration (<!DOCTYPE html>) is placed at the very beginning of an HTML document. It informs the browser about the version of HTML being used, which is HTML5 in this case. This declaration ensures that the document is rendered correctly.
The <html> tag serves as the root element of an HTML document. It encompasses the entire content of the page and provides the base for all other elements.
Head Section:
The <head> section comes after the opening <html> tag and before the <body> tag. It contains meta information about the document, such as the page title, character encoding, CSS stylesheets, JavaScript files, and other metadata.
The content within the <head> section is not directly visible on the page but is crucial for search engines and browsers to understand and process the document correctly.
The title tag is placed within the <head> section. It defines the title of the web page, which is displayed on the browser's title bar or in search engine results. The text enclosed within the <title> tags is a concise description of the page's content and should accurately represent its purpose.
Body Section:
The <body> tag contains the visible content of the web page. It includes text, images, links, and interactive elements like forms or buttons. Everything between the opening <body> tag and the closing </body> tag is considered the body content.
Here is a basic HTML template that illustrates the standard structure: html
<!DOCTYPE html>
<html>
<head> <title>Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the content of my web page.</p>
<a href="https://www.testing.com">Visit Example</a>
<!-- Additional elements and content go here →
</body>
</html>
In the example above, the <title> tag sets the page title, and within the <body> section, we have a heading <h1>, a paragraph <p>, and a link <a> to the website "www.testing.com". This template is a starting point, and you can add more elements and content within the <body> section to build your web page.
Remember, this is a basic representation of the HTML structure. As you progress in web development, you will encounter more complex elements and tags to enhance the functionality and design of your web pages.
Heading tags, from <h1> to <h6>, are used to define headings and subheadings in a web page. They play a crucial role in organizing and structuring content. The higher the number in the heading tag, the less significant the heading is. Here is an example:
html
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
Heading tags not only provide visual hierarchy but also contribute to search engine optimization (SEO) by signalling the importance of content to search engines
The <p> tag is used to define paragraphs of text. It is a block-level element that creates a new paragraph. Here is an example:
html
<p>This is a paragraph of text.</p>
<p>Another paragraph of text.</p>
If you want to create a line break within a paragraph, you can use the <br> tag, which is an empty element. Here is an example:
html
<p>This is the first line.<br>
This is the second line.</p>
The <a> tag is used to create hyperlinks. It allows you to link to other web pages, documents, or specific parts of a page. The href attribute specifies the URL of the destination. Here is an example:
html
<a href="https://www.example.com">Visit Example</a>
You can also use the target attribute to control how the link opens. For example, target="_blank" opens the link in a new browser tab:
html
<a href="https://www.example.com" target="_blank">Visit Example</a>
The <img> tag is used to embed images in a web page. The src attribute specifies the image source (file URL or path). The alt attribute provides alternative text that describes the image for accessibility purposes. Here is an example:
html
<img src="image.jpg" alt="Description of the image" title="Image Title">
You can also use the title attribute to provide additional information about the image when the user hovers over it: html
<img src="image.jpg" alt="Image Description" title="Additional Information">
HTML provides two types of lists: unordered lists (<ul>) and ordered lists (<ol>). The <li> tag is used to define individual list items within these lists. Here is an example:
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
Tables are used to present data in a structured format. The <table> tag creates the table, while the <tr> tag defines table rows. Within each row, we use the <td> tag to define table cells. The <th> tag is used for table headers. Here is an example:
html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
The <div> tag is used for grouping elements together and applying styles or JavaScript to them. The <span> tag is used for inline styling or targeting specific parts of the text. Here is an example:
html
<div> <p>This is a group of elements.</p>
<span style="color: blue;">This text is styled differently.</span> </div>
The <form> tag is used to create a web form. The <input> tag represents various input types such as text fields, checkboxes, radio buttons, etc. The <textarea> tag is used for multi-line text input, and the <button> tag represents a clickable button. Here is an example.
html
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea> <br>
<button type="submit">Submit</button>
</form>
These examples demonstrate the usage of the essential HTML tags discussed.
