The End Tag in HTML Contains

An end tag, also known as a closing tag, signals the conclusion of an HTML element in HTML (Hypertext). Tags define HTML elements, and they are the building blocks of a web page. Tags consist of an opening tag, content, and a closing tag.

Here's a breakdown of an HTML element with both opening and closing tags:

'<tagname>': This is the opening tag. It indicates the beginning of an HTML element and states what type it is. The tag name must be a recognized HTML name, such as <p> for paragraphs, headings (<h1>, etc.), links (a), and so on.
'Content goes here': This is what the HTML element means. What's in an element? It's information or text. Content depends on the type of element.
'</tagname>': This is the closing tag. It closes the HTML element. The tag name is the same as that of the opening tag, indicating where an element stops.

Here are a few examples to illustrate the concept:

Paragraph element:

Heading element:

Link element:

We can organize the content of an HTML document into a hierarchy this way by using opening and closing tags for nesting. Every opening tag requires a corresponding closing tag, which must be properly nested so that the integrity of the HTML structure is maintained. If not done, it may cause rendering problems or strange behavior in web browsers.

Nesting and Hierarchy

HTML elements can nest inside of one another to construct a hierarchical structure. Proper use of the opening and closing tags also helps to make sure that nesting elements are clearly laid out. Here's an example:

<div>
  <p>This is a paragraph inside a div.</p>
</div>

Paragraphs (<p>) are nested within divisions (<div>) in this example.

1. Void Elements:

However, not all HTML elements need closing tags. Void elements, such as <img>,<br> and input, have no content; they are self-closing. They can be written with a trailing slash before the closing angle bracket like this:

<img src="image.jpg" alt="An example image" />
<br />
<input type="text" />

2. Attributes:

An HTML tag can have attributes that add extra information about the element. The attributes are contained within the opening tag and appear in both the beginning and end tags. Here's an example with the "href" attribute in an <a> (anchor) tag:

3. Document Structure:

The entire content of an HTML document is contained inside the <html> element. Typically, there are a pair of <head> and<body> elements within the nested tree structure that enclose everything under them. It further assists in arranging the metadata (in <head>) and visible content (in <body>).

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

4. HTML5 Simplifications:

HTML5 does have some simplifications. For instance, the closing tag for many elements (such as <p>,<li>, etc.) is redundant since a parser can infer them.

<p>This paragraph doesn't need a closing tag.
<p>Another paragraph without a closing tag.

But remember that although HTML doesn't mind a few errors, it is still a good form to write well-formed HTML. It helps if you stick in proper opening and closing tags for all elements. This makes for better readability, maintainability, and cross-browser compatibility.

Comments in HTML

HTML code comments can be used to provide explanations or notes for yourself or other programmers. In the browser, there are no comments.

<!-- This is a comment -->
<p>This is a paragraph.</p>

1. Special Characters:

There are some special characters in HTML, such as < and >. To display these characters as part of the content, you should use character entities:

< is represented as <
> is represented as >
& is represented as &

2. HTML Entities:

The use of HTML entities represents characters with special meanings in HTML. For example, © is the copyright symbol ©.

3. Doctype Declaration:

The <!DOCTYPE html> declaration is used at the beginning of an HTML document to indicate which version of HTML it uses. The HTML5 doctype is widely used in modern web development.

<!DOCTYPE html>
<html>
  <!-- ... -->
</html>

4. Self-Closing Tags:

In fact, void elements are self-closing and do not need separate closing tags. In these cases, HTML5 lets you omit the closing slash.

<img src="image.jpg" alt="An example image">
<br>
<input type="text">

5. Whitespace:

In HTML, multiple spaces and line breaks are compressed into a single space. If you want to keep whitespace, the <pre> (preformatted) tag or CSS styles can be used.

<pre>
  This text
  will preserve
  whitespace.
</pre>

6. HTML Forms:

HTML provides form elements such as <form>, <input>, <select>, and <button> for adding interactivity to web pages.

<form action="/submit" method="post">
  <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>
  <button type="submit">Submit</button>
</form>

The following are a few more aspects of HTML that help in building pages with good structure and semantic meaning. Learning these concepts then lets developers create web content that not only looks great, but is understandable by browsers and users with disabilities.

7. Meta Tags:

But meta tags give metadata about the HTML document, such as character set and viewport settings. They are usually situated within the <head> element.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A brief description of the page">
  <title>Page Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

8. Lists:

HTML has ordered lists (<ol>), unordered lists (<ul>), and list items (<li>).

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

9. Images:

You use the <img> element to show images. The src attribute indicates the source (URL) of the image; alt provides alternative text for accessibility.

10. Tables:

Tables are generated by the <table> element, with rows (<tr>) and table headers (<th>), and containing cells within themselves, which can also be divided into cols.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

11. Links and Navigation:

Links in HTML are created with the <a> (anchor) element. The href attribute defines the target of a link.

HTML provides navigation elements of <nav>,<ul> and <li>.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

12. Audio and Video:

You use the <audio> and <video> elements to embed audio and video.

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

These are just a few more elements and concepts of HTML. Knowing how to apply these elements and structure your HTML document is essential in creating good-looking web pages. HTML, together with CSS and JavaScript, provides the basis for modern web development.

13. Forms and Input Types:

HTML forms let the user enter data. Information of different kinds is collected by input types that include text, passwords, checkboxes, and radio buttons.

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <input type="checkbox" id="subscribe" name="subscribe" value="yes">
  <label for="subscribe">Subscribe to newsletter</label>
  <br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
  <br>
  <button type="submit">Submit</button>
</form>

14. Semantic HTML:

Semantic HTML elements provide information about the structure and contents of a web page. <header>, <nav>: navigation information.

<header>
  <h1>Website Title</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>
<aside>
  <p>Additional information or related content.</p>
</aside>
<footer>
  <p>© 2023 Website Name. All rights reserved.</p>
</footer>

Conclusion

Actually, HTML or Hypertext Markup Language is the basic language that gives structure and meaning to content on the web. Elements within a web document can be defined and organized by opening and closing tags in HTML. The basic framework of HTML can be used to create everything from simple text components to high-tech multimedia content. The importance of this is shown by the inclusion of it as semantic elements, such things as <header>, <nav>, and <footer>.

With the development of web programming, HTML has evolved to reflect trends in modern design and function. The <meta> Viewport tag makes responsive design possible to adapt web pages for different-sized device screens. Also, HTML5 includes the canvas element as well as embedding capabilities for multimedia. The triad that forms the foundation of web development consists of HTML, used in conjunction with CSS for styling and layout, and JavaScript for dynamic interactivity.

To get into the field, HTML mastery is a necessity. It allows developers to build well-structured websites which are accessible while looking good. In the dynamic digital world, HTML is still irreplaceable as the building block of interactive web experiences; nothing beats good HTML.

Next TopicHTML Input Type Number

← prev next →