有了页面总体布局，下面开始各个页面元素的完善。首先从头部header层开始。这一区域主要有4个组成部分，分别是网站LOGO、网站标语、搜索框及网站导航菜单。下面依次
序开始编码。
<p id="logo">我爱天津网站建设</p>
上面网站LOGO部分的XHTML代码将链接文字包含在段落p里面，通过给链接元素a设置CSS样式应用背景图片，将LOGO图片显示出来，然后再合理地隐藏掉链接文字。有些做法是将LOGO图片通过img标签直接引用进来，然后给图片增加超链接。毛这里不否定这样的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字：设置背景图片的方式引入LOGO，能够适应更多的浏览环境，即使图片不显示、CSS样式被禁用，站点名称都不会丢失，具有更强的适应性。网站标语的XHTML编码如下。
<p id="slogan">致力于Web标准在天津网站制作行业的应用及发展</p>
上面网站标语的XHTML代码与前面网站LOGO的编码类似，总体编码思路是以CSS设置背景图片的形式来引入标语图片，文字隐藏不可见。只有当图片不显示或CSS样式失效时，标语的文字才会直接显示在屏幕上。搜索框的XHTML编码如下。
<form action="" method="post" name="search" id="search">
<input type="text" name="keyword" id="keyword" />
<input type="image" src="images/search_btn.jpg" name="search_btn" id="search_btn" />
</form>
上面搜索框的XHTML代码为了尽可能地减少标签，没有在搜索表单的外围设置div或p标签，而直接为表单form设置id=”search”，以此建立与CSS选择器的联系进行CSS样式定义。表单内部有两个元素，关键字文本框与提交搜索的按钮，分别定义为id='keyword”和id，search_btn。
定制图像按钮是一个特殊的表单元素，当用户单击后浏览器会提交表单。定制图像按钮通过input表单元素的image类型创建，需要指定图片文件的URL，通过src属性定义。本例中
的提交搜索即是创建了一个定制图像按钮。网站导航菜单是网站最重要的元素之一，这里用无序列表ul的形式来实现，具体XHTML编码如下。
<ul>
<li id="menu_1">天津软膜天花</li>
<li id="menu_2">Div+CSS教程</li>
<li id="menu_3">CSS布局实例</li>
<li id="menu_4">CSS2.0教程</li>
<li id="menu_5">CSS酷站欣赏</li>
<li id="menu_6">CSS模板下载</li>
<li id="menu_7">Web标准</li>
</ul>
菜单是一组没有特定顺序的相关条目的集合，在XHTML中这正是无序列表ul的释义，一固些整里建立无序列表将菜单栏目作为列表项li写入在无序列表中，以此形式进行编码。有更强的语义。一在编码时可以暂且不管XHTML标签是以何种形式呈现，这是XHTML编码的精髓。而XHTML标记的外观显示，可以通过CSS样式表定义，让表现与内容分离。