# Technical Document: \<section\> element with class of "main-section"

**URL:** <https://forum.freecodecamp.org/t/technical-document-section-element-with-class-of-main-section/318774>\
**Category:** General\
**Created:** [October 1, 2019, 6:22pm UTC](https://forum.freecodecamp.org/t/technical-document-section-element-with-class-of-main-section/318774 "2019-10-01T18:22:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![markdeafmcguire](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/markdeafmcguire/32/117856_2.png) [@markdeafmcguire](https://forum.freecodecamp.org/u/markdeafmcguire)\
**Post date:** [October 1, 2019, 6:22pm UTC](https://forum.freecodecamp.org/t/technical-document-section-element-with-class-of-main-section/318774/1 "2019-10-01T18:22:07Z")

</div>

Pardon me if my formatting is off-base here. It’s been a while and I’m getting back in the groove here. Here’s my CodePen for the Technical Document project…

[https://codepen.io/markdeafmcguire/pen/PoYvxJr](https://codepen.io/markdeafmcguire/pen/PoYvxJr)

I’m currently investigating the final two issues…

1. Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText. (e.g. The that contains the header, “JavaScript & Java”, should have a corresponding id=“JavaScript\_&\_Java”).

If I understand the rule correctly, the following code example is what I have for all five sections with their respective ids matching the text.

```auto
  <section class="main-section" id="Introduction"><!-- main section #1 -->
    <header><h2>Introduction</h2></header><!-- describe topic of section #1 -->

```

This should satisfy the #4 rule correctly. What am I missing here?

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [October 1, 2019, 7:14pm UTC](https://forum.freecodecamp.org/t/technical-document-section-element-with-class-of-main-section/318774/2 "2019-10-01T19:14:45Z")

</div>

You included a period after the innerText in your `header`. Paste this where it goes.

```auto
<section class="main-section" id="Using_Elements"><!-- main section #4 -->
    <header><h2>Using Elements</h2></header>

```

---

<div class="post-metadata">

**Author:** ![markdeafmcguire](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/markdeafmcguire/32/117856_2.png) [@markdeafmcguire](https://forum.freecodecamp.org/u/markdeafmcguire)\
**Post date:** [October 1, 2019, 8:14pm UTC](https://forum.freecodecamp.org/t/technical-document-section-element-with-class-of-main-section/318774/3 "2019-10-01T20:14:20Z")

</div>

Ahh, great catch @Sky020. I didn’t realize a simple period could impact the results. Thank you so much. I really appreciate your help.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 7:36pm UTC](https://forum.freecodecamp.org/t/technical-document-section-element-with-class-of-main-section/318774/4 "2021-01-16T19:36:40Z")

</div>