HTML is the key to getting maximum flexibility and return on your investment in Web content. From its beginnings, HTML was designed to clearly define a document's hierarchical structure (headline 1, headline 2, paragraph, list, headline 3 etc.) and
the visual presentation of the document (boldface, italics, font, type size, color, etc.). HTML markup is considered semantic when standard HTML tags are used to convey meaning and content structure, it is not simply to make text look a certain way in a
browser.
The semantic approach to Web markup is a central concept underlying efficient Web coding, information architecture, universal usability, search engine visibility, and maximum display flexibility. Web content is accessed through Web browsers, mobile computing
devices of all kinds, and screen readers. It is also read by search engines and other computing systems, which extract meaning and context from the way the content is marked up in HTML.
The most important headline on any page is the page title. On this page it is the red text at the top of the page. You will never need to create a title on a New School website, it is something set by the CMS.
This is how you see the content:
This
is ordinary paragraph text within the body of the document, in which
words and phrases may be set in bold for emphasis or italics to mark them as book titles. Use boldface type for emphasis sparingly.
This is a Sub-headline That is Secondary in Importance to the Page Title
Present related things in the form of a list.
- A list signals that items are conceptually related.
- Lists can be ordered (with numerals) or unordered (with bullets).
- Cascading Style Sheets can be used to style lists in many different ways.
This is a Sub-Headline Related to the Secondary One Above
The style of this headline indicates to readers and search engines that it is less important than the larger one above.
This is how browsers and search engines see the same content:
<h1>The Page Title</h1>
<p>This
is ordinary paragraph text within the body of the document, in which
words and phrases may be set in bold for emphasis or italics to mark them as
<em>book titles</em>. <strong>Use boldface type for emphasis sparingly<strong>.</p>
<h2>This is a Sub-Headline of Secondary Importance to the Page Title</h2>
<p>Present related things in the form of a list.</p>
<ul>
<li>A list signals that items are conceptually related.</li>
<li>Lists may be ordered (with numerals) or unordered (with bullets).</li>
<li>Cascading Style Sheets can be used to style lists in many different ways.</li>
</ul>
<h3>This is a Sub-eadline Related to the Secondary One Above</h3>
<p>The
style of this headline indicates to readers and search engines that it
is less important than the larger one above.</p>
On the surface, a structured document looks no different from one in which font size and other visual formatting are used to distinguish elements such as headings. When it comes to functionality, however, structure gives a webpage power and utility. Even
in the simple example above, a search engine would be able to distinguish the importance and priority of the headlines, determine which keywords are important, and identify conceptually related items in a list. A Cascading Style Sheet designed specifically
for mobile phones could display the headlines and text in fonts appropriate for small screens, and a screen reader would know where and how to pause or change voice tone to convey the content structure to a visually impaired reader.
On the New School
website, the page title (H1) is rendered by the CMS, which automatically applies the title head tag; you need to concern yourself only with labeling heads H2, H3, H4, etc.. Keep in mind that the level of importance increases as the number in the heading
designation decreases.