CODEWITHSUNDEEP
html
sewo
sewo

Reputation: 330

Is there a content element in HTML5?

I was confused about the content element the guy is using. I couldn't find information on it and as far as I know there wasn't something like this in HTML5. Am I wrong?

iterating code, from this video: http://youtu.be/eOG90Q8EfRo?t=15m1s

<article>
  <header> </header>
  <footer> </footer>
  <content> Is this correct? </content>
</article>

Upvotes: 20

Views: 26505

Answers (4)

pbarney
pbarney

Reputation: 2833

Short answer: Not officially, but yes, if you want there to be.

Any "undefined" element you use is considered a block level element by the browser, and both CSS and JavaScript will be able to target those elements. So you're free to use <avatar>, <carousel>, <rating>, etc. as you like.

Just know that there's no implied semantic meaning for these elements, so search engines and scrapers won't necessarily know how to interpret your intent. So in a way, they're just useful tool for you, the developer.

But if you want to do it right, you can create custom elements in JavaScript that will give you much more functionality, such as default styling. Here's a simple example:

<section>
    <header>
        <h2>Section Header</h2>
    </header>
    <contents>
        <p>Main content of section begins here.</p>
        <p>etc...</p>
    </contents>
</section>

<script>
    class Contents extends HTMLElement {
        constructor() {
            super();
        }
    }

    customElements.define('contents', Contents);
</script>

...and here's a much more robust example for a checkbox element:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Custom ToggleSwitch Element</title>
        <script>
          class ToggleSwitch extends HTMLElement {
              constructor() {
                  super();
                  const shadow = this.attachShadow({ mode: 'open' });
                  shadow.innerHTML = `
                      <style>
                          :host {
                              display: block;
                              font-family: Arial, sans-serif;
                          }
                          .switch {
                              position: relative;
                              display: inline-block;
                              width: 60px;
                              height: 34px;
                              margin: .25em;
                          }
                          .switch input {
                              opacity: 0;
                              width: 0;
                              height: 0;
                          }
                          .slider {
                              position: absolute;
                              cursor: pointer;
                              top: 0;
                              left: 0;
                              right: 0;
                              bottom: 0;
                              background-color: #ccc;
                              transition: .4s;
                          }
                          .slider:before {
                              position: absolute;
                              content: "";
                              height: 26px;
                              width: 26px;
                              left: 4px;
                              bottom: 4px;
                              background-color: white;
                              transition: .4s;
                          }
                          input:checked + .slider {
                              background-color: #2196F3;
                          }
                          input:checked + .slider:before {
                              transform: translateX(26px);
                          }
                      </style>
                      <label class="switch">
                          <input type="checkbox">
                          <span class="slider"></span>
                      </label>
                  `;
                  this._inputElement = shadow.querySelector('input');
              }
              
              // Lifecycle callback: Called when the element is added to the DOM
              connectedCallback() {
                  this._inputElement.addEventListener('change', this._onToggle.bind(this));
                  this._updateCheckedState();
              }

              // Lifecycle callback: Called when the element is removed from the DOM
              disconnectedCallback() {
                  this._inputElement.removeEventListener('change', this._onToggle.bind(this));
              }

              // Attribute management: Specify observed attributes
              static get observedAttributes() {
                  return ['checked'];
              }

              // Attribute callback: Called when an observed attribute changes
              attributeChangedCallback(name, oldValue, newValue) {
                  if (name === 'checked') {
                      this._updateCheckedState();
                  }
              }

              // Property management: Define getter and setter for 'checked' property
              get checked() {
                  return this.hasAttribute('checked');
              }

              set checked(value) {
                  if (value) {
                      this.setAttribute('checked', '');
                  } else {
                      this.removeAttribute('checked');
                  }
              }

              // Update the internal state of the input element based on the 'checked' attribute
              _updateCheckedState() {
                  this._inputElement.checked = this.checked;
              }

              // Event handler for toggle change
              _onToggle(event) {
                  this.checked = event.target.checked;
                  const toggleEvent = new CustomEvent('toggle', {
                      detail: { checked: this.checked },
                      bubbles: true,
                      composed: true
                  });
                  this.dispatchEvent(toggleEvent);
              }
          }

          customElements.define('toggle-switch', ToggleSwitch);
        </script>
      </head>
      <body>
        <toggle-switch id="myToggleSwitch"></toggle-switch>
        
        <script>
            const toggleSwitch = document.getElementById('myToggleSwitch');

            // Listen for the custom 'toggle' event
            toggleSwitch.addEventListener('toggle', function(event) {
                console.log(event.detail);
                console.log('Toggle switch state:', event.detail.checked);
            });

            // Example of changing the checked state programmatically
            setTimeout(() => {
                toggleSwitch.checked = true; // This will trigger the attributeChangedCallback and update the UI
            }, 2000);
        </script>
      </body>
    </html>

Upvotes: 0

Omar Juvera
Omar Juvera

Reputation: 12297

You can use <main>. It is used in HTML the separate the main content of your page.

Like this:

<!DOCTYPE html>
<html>
<head>
    ...head content
</head>

<body>
    <header>
    ...header content
    </header>

    <nav>
    ...nav menu
    </nav>

    <main>
        <section id="news">
            <article id="who-let-the-dog-out">
            ...article content
            </article>

            <article id="LottoSurprice">
            ...article content
            </article>
        </section>

        <section id="blog">
        ...section content
        </section>

        <aside id="advertisement">
        ...aside content
        </aside>
    </main>  <!-- end of page content -->

    <footer>
    ...footer content
    </footer>
</body>
</html>

— <main> @ MDN

Upvotes: 12

kzh
kzh

Reputation: 20598

There is a <content> element, although it is used differently than how the presenter is using in the video linked in this question.

The HTML <content> element is used inside of Shadow DOM as an insertion point. It is not intended to be used in ordinary HTML. It is used with Web Components.

The presenter in the video probably should have been using the <main> element.

The HTML <main> Element represents the main content of the <body> of a document or application. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document's main function is as a search form).

Upvotes: 13

Quentin
Quentin

Reputation: 943567

A <content> element was proposed but rejected for HTML 5.

Such is the peril of trying to teach draft specifications.

Upvotes: 22

Related Questions