What is HTML?
HyperText Markup Language (HTML) is a programming language that is used to create and structure content for the World Wide Web. HTML is used to define the structure and layout of web pages, and it consists of a series of elements, or tags, that are used to mark up the content of a page.
Example:
Here is a simple example of an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
In this example, the <!DOCTYPE html> declaration indicates that the document is an HTML5 document. The <html> element encloses all of the content of the page, and the <head> element contains information about the page, such as the title. The <body> element contains the content that is visible to the user, such as the heading and paragraph.
Semantic:
Here is a semantic showing the structure of this HTML page:
HTML5 introduces a set of semantic elements that provide better structure and meaning to web documents. These elements help convey the purpose and content of different parts of a web page, making it more accessible and understandable for both developers and users. Here are some key HTML5 semantic elements and their usage:
<header>:
Usage: Represents a group of introductory or navigational aids. It can contain headings, logos, navigation menus, and other elements.
Example:
<header> <h1>Website Title</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>
<nav>:
Usage: Represents a navigation menu, typically containing links to other pages or sections within the website.
Example:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
<main>:
Usage: Represents the main content of the document. It should not include headers, footers, or sidebars.
Example:
<main> <h2>Main Content Heading</h2> <p>This is the main content of the page.</p> </main>
<article>:
Usage: Represents a self-contained piece of content that could be distributed and reused independently, such as a blog post or news article.
Example:
<article> <h2>Article Title</h2> <p>Article content goes here.</p> </article>
<section>:
Usage: Represents a thematic grouping of content. It helps to organize content into different sections.
Example:
<section> <h2>Section Heading</h2> <p>Section content goes here.</p> </section>
<aside>:
Usage: Represents content that is tangentially related to the content around it. It is often used for sidebars or content that is not the main focus.
Example:
<aside> <h3>Related Links</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </aside>
<footer>:
Usage: Represents a footer for a section or the whole page. It typically contains metadata, copyright information, and links to related resources.
Example:
<footer> <p>© 2023 Your Website. All rights reserved.</p> </footer>These semantic elements help make HTML5 documents more readable, maintainable, and accessible, and they also provide a clear structure for search engines and other tools that analyze web content. When using HTML5, it's recommended to use these semantic elements appropriately to improve the overall quality of your web pages.
Basic HTML Tags With Examples:
HTML tags are used to mark up the content of an HTML document, and they tell the web browser how to structure and format the content. Many different HTML tags can be used to create different types of content, such as headings, paragraphs, lists, and links.
Here is a list of some common HTML tags, along with examples and syntax:
<html>: This is the root element of an HTML document, and it encloses all of the content of the page.
<html>
<!-- content goes here -->
</html>
<head>: This element contains information about the page, such as the title and any metadata.
<head>
<title>My Page</title>
<meta name="description" content="A description of my page.">
</head>
<body>: This element contains the content that is visible to the user, such as headings, paragraphs, and images.
<body>
<h1>Welcome to my page</h1>
<p>This is the content of my page.</p>
</body>
<h1>-<h6>: These elements represent headings of different sizes, with <h1> being the largest and <h6> being the smallest.
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
<p>: This element represents a paragraph of text.
<p>This is a paragraph of text.</p>
<a>: This element represents a hyperlink, which allows users to click on a piece of text or an image and be taken to another webpage.
<a href="https://www.example.com">Click here to go to Example.com</a>
<img>: This element represents an image, and it is used to embed an image into an HTML page.
<img src="image.jpg" alt="An image">
HTML Input Elements With Examples :
HTML input elements are used to create forms that allow users to enter data, and they are an important part of building web applications. There are many different types of input elements, each with its specific purpose and behavior.
Here is a list of some common HTML input elements, along with examples and syntax:
<input>: This element represents a generic input field, and it can be used to create various types of form elements, such as text fields, checkboxes, and buttons. The type of input field is determined by the type attribute.
<!-- This is a text input field -->
<input type="text" name="username" placeholder="Enter your username">
<!-- This is a checkbox -->
<input type="checkbox" name="agreement" value="yes"> I agree to the terms and conditions
<!-- This is a submit button -->
<input type="submit" value="Sign Up">
<textarea>: This element represents a multi-line text input field.
<textarea name="message" rows="5" cols="50">Enter your message here</textarea>
<select>: This element represents a drop-down list of options that the user can choose from.
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Audio and Video Tags In HTML :
The HTML <audio> and <video> elements allow you to embed audio and video content into an HTML page. They are useful for adding multimedia content to your website or web application, such as music, podcasts, and movies.
Here is an example of the syntax for the <audio> element:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
In this example, the controls attribute specifies that the audio player should include controls, such as a play button and volume slider. The <source> element specifies the source of the audio file, and the type attribute indicates the MIME type of the file. The text between the <audio> tags is displayed if the browser does not support the <audio> element.
Here is an example of the syntax for the <video> element:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
In this example, the width and height attributes specify the dimensions of the video player, and the controls attribute specifies that the player should include controls, such as a play button and volume slider. The <source> element specifies the source of the video file, and the type attribute indicates the MIME type of the file. The text between the <video> tags is displayed if the browser does not support the <video> element.