Skip to main content Web Design I Main Semantic Markup Block-level Elements Inline-level Elements Tables & Forms Generic Elements Marking Up Text You must assign an element to all the text in a document. In other words, all text must be enclosed in some sort of block element. Textthat is not contained within tags is called naked or anonymous text, and it will cause a document to be invalid. It will also make your page impossible to style with CSS later on. Semantics Choose elements that describe your content as accurately as possible. You should always choose elements that describe your content as accurately as possible. If you don’t like how it looks, change it with a style sheet. A semantically marked up document ensures your content is available and accessible in the widest range of browsing environments, from desktop computers to cell phones to screen readers. It also allows non-human readers, such as search engine indexing programs, to correctly parse your content and make decisions about the relative importance of elements on the page. Your content should also read in a logical order in the source. Doing so improves its readability in all browsing environments. Information that should be read first should be at the beginning of the XHTML source document. You can always use style sheets to position elements where you want them on the final web page. Building Blocks Block-level elements make up the main components of content structure. Most browser's built-in style sheets will cause block-level elements to start on a new line and usually have margins added above and below, stacking up like blocks in the normal flow of the document. There are surprisingly few text block-level elements. Headings h1, h2, h3, h4, h5, h6 Paragraphs p Long quotes blockquote Preformatted text pre Various list elements ol, ul, li, dl, dt, dd Horzontal rules hr Inline-level elements Most XHTML text elements are inline elements. Inline text elements fall into two general categories: semantic elements and presentational elements. Browser default styles usually cause these elements to flow inline, or just stay in the flow of text and do not cause line breaks. The semantic elements describe the meaning of the text; for example, an acronym or emphasized text. The presentational elements provide descriptions of the element’s typesetting or style, such as bold, italic, or underlined. It should come as no surprise that the presentational inline elements are discouraged from use in contemporary web design where style information should kept be separate from the markup. Tables & Forms Tables and forms are also block-level elements, but several require more than one element to function. Table elements table elements form elements <table>, <caption>, <thead>, <th>, <tfoot>,<tbody>, <tr>, <td> <form>, <input>, <select>, <option>, <textarea> Additionally, form elements have some required attributes that define the various element functions. Generic Elements div and span There are endless types of information in the world, but not all that many semantic elements. XHTML provides two generic elements that can be customized to describe your content perfectly. The div (short for “division”) element is used to indicate a generic block-level element, while the span element is used to indicate a generic inline element. You give a generic element a name using either an id or class attribute. The div and span elements have no presentation qualities of their own, but you can use CSS to format the content however you like. Generic elements are a primary tool in standards-based web design because they enable authors to accurately describe content and offer plenty of hooks for adding style rules.