Почему xhml игнорируются компоненты Primefaces?

Question

Алена @SAlenaA

PrimeFaces

Почему xhml игнорируются компоненты Primefaces?

Здравствуйте, впервые пишу "настоящий" проект, поэтому не судите строго.
На страничке xhtml отображаются все компоненты, кроме компонентов primefaces будь то accordionPanel, tab и т.д. В чем может быть косяк, я уже голову сломала. Причем просто текст через outputtext отображается, а в теге p: - уже нет
main.xthml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"   
      xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
        <link href="main/app/style.css" rel="stylesheet" type="text/css"></link>
    </h:head>
    
    <h:body>
        <div id="block">
            <!--Заголовок-->
        <div id="header" align="center">Система информационного обеспечения органов государственной власти </div>
            <!--Меню навигации-->
        <ul class="css-menu-3">
            <li><a href="#" class="selected">Текущая обстановка</a></li>
            <li><a href="#">Справочники</a></li>
            <li><a href="#">Отчеты</a></li>
            <li><a href="#">Раздел</a></li>
            <li><a href="#">Еще раздел</a></li>
        </ul>
        <div id="content">
           <!--Карта-->
        <div class="cart">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d147259.98509664007!2d55.9831080970703!3d54.781069696047!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1472816480090" 
                   frameborder="0" style="border:0" ></iframe>
        </div> 
            <!--Параметры-->
        <div class="right">
        <h:form> 
            <h:outputText> параметры должны отображаться здесь</h:outputText>
            <p:accordionPanel>
                <p:tab title="Районы и города">
                    <h:outputText value="Здесь будет список городов из БД->Справочников" 
                                 style="text-indent:16px; display: block"/>
                </p:tab>
                <p:tab title="Виды перевозок">
                    <h:outputText value="Здесь будет перечень перевозок из БД->Справочников" 
                                      style="text-indent:16px; display: block"/>
                </p:tab>
                <p:tab title="Маршруты">
                    <h:outputText value="Здесь будет маршруты для ПП из БД->Справочников" 
                                      style="text-indent:16px; display: block"/>
                </p:tab>
                <p:tab title="Еще какой-либо параметр">
                    <h:outputText value="Здесь будет ....... из БД->Справочников" 
                                      style="text-indent:16px; display: block"/>
                </p:tab>
            </p:accordionPanel>
         </h:form>
            </div>
        </div>
        </div>
        <div class="clear"></div>
        <!--Подвал - Footer-->
        <div class="footer">
        <p>Главная | <a href="#">О нас</a> | <a href="#">Техническая поддержка</a></p>
        </div>
    </h:body>
</html>

style.css:

@charset "utf-8";
* {
margin: 0;
padding: 0;
border: 0;
}


#header{
    text-align: center;
    height: 20%;
    background-color: #225588;
    line-height: 100px;
    color: #fefefe;
    font-size:26pt;
    font-family:Georgia;
}
ul.css-menu-3 {
    list-style: none;
    border-bottom: 5px solid #bb0000;
    border-top: 1px solid #114477;
    padding: 11px;
    background: #225588;
}

ul.css-menu-3 li {
    display: inline
}

ul.css-menu-3 li a {
    color: #fefefe;
    text-decoration: none;
    background: #225588;
    border: 1px solid #225588;
    border-bottom: 1px solid #114477; 
    margin: 0; 
    padding: 10px 14px 10px 14px 
}

ul.css-menu-3 li a:hover {border-left: 1px solid #114477; border-right: 1px solid #114477}

ul.css-menu-3 li a.selected {
    color: #fefefe;
    background: #bb0000;
    border: 1px #cc0000 solid;
    border-bottom: 1px solid #bb0000;
    border-left: 1px solid #770000;
    padding: 10px 14px 10px 14px
}


div.cart {
  float:left;
  margin-left: 3px;
  height: 75vh;
  width: 70vw;
  background-size: cover;
}
div.cart iframe{
      background-size: cover;
      
      height: 75vh;
      width: 70vw;
}
div.right {
  float:left;
  width: 28vw;
  margin: 2px;
  background-color: #c0c0c0;
  text-align: center;
  font-size: 18px;
}
div.right.ui-accordion {
  float:left;
  width: 28vw;
  margin: 2px;
  background-color: #c0c0c0;
  text-align: center;
  font-size: 18px;
}
.clear {
  clear: both; // Отменяем позиционирование (влияние float)
}
div.footer, div.footer a, div.footer p {
    text-align: center;
    background-color: #225588;
    color: #fefefe;
    font-size:12pt;
    height: 20px;
    
}