HTML tags can control how the information and format of a web page are displayed in your browser. Most HTML tags have two pieces: an opening and a closing section, and any content types within those sections has an effect based on how the tag works.
HTML Elements are made up of HTML tags and content. Between the start and end tags is the HTML element. It is critical that your material be included.
HTML Attributes
An HTML attribute is a word for a property that provides more information about HTML elements. id, class, style, and other HTML attributes are only a few instances. Many attributes are global and can be applied to any element, but we only employ a few of them for certain HTML elements. In the following example, h1 tag has an id called āheadingā
<h1 id="heading">Hello, World!</h1>
Common Tags & Elements
Example
<!DOCTYPE html>
<html>Ā
<head>Ā Ā
<title>Title of the site</title>Ā
</head>Ā
<body>Ā Ā
<h1>Heading</h1>Ā Ā
<h2>Subheading</h2>Ā Ā
<p>This is a very long paragraph</p>Ā Ā
<a href="https://linccodes.vercel.app">My Site</a>Ā Ā
<img src="https://cdn-icons-png.flaticon.com/512/919/919827.png" alt="Image" width="100" height="100"/>Ā Ā
<ul>Ā Ā Ā
<li>Item 1</li>Ā Ā Ā
<li>Item 2</li>Ā Ā
</ul>Ā
</body>
</html>
<!DOCTYPE html>
The document type is represented by the <!DOCTYPE> declaration, which aids browsers in appropriately displaying web pages. Located at the start of the code. HTML5 uses the <!DOCTYPE> declaration.
<html></html>
The root of an HTML document is represented by the <html> tag. All other HTML elements are contained within the <html> tag.
The <html> and <body> tags are separated by the <head> element, which is a container for metadata. The term metadata refers to information about the HTML document. The metadata isn't shown by the browser. The document title, character set, styles, scripts, and other meta information are often defined via metadata.
<body>Content shown by the browser goes here</body>
The body of the document is defined by the <body> tag. The <body> element includes all of an HTML document's content, including headings, paragraphs, images, hyperlinks, tables, lists, and so on.
HTML headings are defined by the <h1> to <h6> tags. The most essential heading is designated by the <h1> tag. The least important heading is designated by <h6>.
<p>This is a paragraph.</p>
A paragraph is defined with the <p> tag. Statements are given paragraph spacing using paragraph elements.
<div>Ā
<h1>Heading</h1>Ā
<p>Some content in the p tag</p>
</div>
In an HTML document, the <div> tag denotes a division or section. The <div> tag serves as a container for HTML elements, which can then be styled using CSS or changed using JavaScript. The class or id attribute can be used to style the <div> tag.
<h1>Heading <span>one</span> is here</h1>
The <span> element is an inline container that can be used to mark up a section of text or a document. The class and id attributes of the <span> tag can be easily modified with CSS or changed with JavaScript.
The <a> tag is used to create a hyperlink, which is a link between two pages. The href attribute, which indicates the link's destination, is the most important attribute of the <a> element. In all browsers, links will show as follows by default: A link that has not been visited is highlighted in blue. A clicked link is highlighted in purple. A link that is active is highlighted in red.
<button>Click me</button>
A clickable button is defined using the <button> tag. You can place text (and tags like <em>, <strong>, <br>, <img>, and so on, more about this later) inside a <button> element.
An image is embedded in an HTML page using the <img> tag. Image attributes:
src - Defines the image's location.
alt - Provides an alternative text for the image if it can't be displayed for some reason.
width - It's an optional attribute that specifies the image's width for display.
height - It's an optional attribute that specifies the image's width for display.
<em>This is italic</em>
<strong>This is bold</strong>
<blockquote>This is a blockquote</blockquote>
<code>some code</code>
<kbd>ctrl+c</kbd>
The <em> tag is used to emphasize or stress the word(s) included within the opening and closing tags.
The strong tag <strong> is used to make a word appear stronger or bolder in order to emphasize its importance.
When HTML developers wish to add a quote to a passage from a separate source, they use the <blockquote> tag.
The code tag <code> is used to visualize text in a monospaced typeface, similar to how most programming books display code text.
Keyboard tags <kbd> are used to instruct readers to enter content; you can use this keyboard tag at that moment.
<form>
<label for="name">Name:</label>Ā
<input type="text" id="name" name="name">
<br><br>
<!-- <br> - inserts single line breaks in a text -->Ā
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>Ā
<input type="submit" value="Submit">
</form>
The <input> tag designates a field into which the user can enter information. The most crucial form element is the input element. Depending on the type attribute, the <input> element can be presented in a variety of ways.
A list item is defined using the <li> tag. Inside ordered lists (<ol>) and unordered lists (<ul>), the <li> tag is utilized. The list elements in <ul> are commonly shown with bullet points. The list items in <ol> are commonly shown as numbers or letters.
An HTML table is defined using the <table> tag. One <table> element and one or more <tr>, <th>, and <td> elements make up an HTML table.A table row is defined by the <tr> element, a table header is defined by the <th> element, and a table cell is defined by the <td> element. <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements can all be found in an HTML table.
Other HTML 5 tags include audio, video, navigation, header, article, section, and so on. The links below will provide you with additional information.
