Semantic Markup - Websites - UIT - The University of Utah

The definition of the word “semantic” is meaning. Semantic markup is page structure that adds meaning. It gives structure to web page content.

Semantic markup benefits sighted users. People scan web pages. Good heading structure makes scanning easier.
This structure also benefits screen reader users. Screen readers can navigate web pages by heading structure. The user can hear a list of all of the headings on the page, or can navigate directly to top level headings (<h1>), next level headings (<h2>), third level headings (<h3>), and so on.
The markup helps search engines assign importance to the web content of a page. An <h1> tag is ranked as being more important than other text.

Semantic markup consists of applying heading tags (<h1> - <h6>) and paragraph tags (<p>) to text in the proper sequence. The correct application of ordered (<ol>) and unordered (<ul>) lists is also part of semantic markup.

Using Headings Correctly

In the OU Editor, select headings from the format drop-down list.
Use actual heading (<h1> - <h6>) tags for all content headings.
Do not use headings for visual effects. For emphasis, you can use the bold tool or, from the OU editor’s Styles drop-down, you can select one of the text call-out styles. Other styles are available from the drop-down as well.
Heading tags need to be used in the correct order without skipping tags in between. If you only have two headings on a page, they should be an <h1> and an <h2>, not an <h1> and an <h6>.

Using Lists Correctly

Unordered (bullet) lists and ordered (numbered) lists also add meaningful structure. Lists should be used correctly and for the right purposes.

Unordered lists should be used when there is no order of sequence or importance
Ordered lists suggest a progression or sequence.

Paste as Plain Text

paste as plain text tool When text is added to a page in the OU Editor, it is usually copied from another document and then pasted in the page. The editor has a "Paste as Text" tool which removes the formatting from the copied text before pasting it in place. This is particularly helpful when pasting content that comes from Microsoft Word.

The tool acts as a toggle, turning the plain text option on and off. If you click on the the tool and see a message, "Paste is now in plain text mode…" then extra formatting will be removed and you can now paste clean text into your page. Clicking on the Paste as Text tool again will toggle the plain text feature off.

Semantic Markup Example

The example indicates the heading, paragraph and list tags for correct semantic markup. The purple and boxed text shows how the opening and closing tags would be applied in source code when these tags are chosen from the format drop-down list.
Semantic Markup Text Example

Adding Styles

styles drop-down list tool If you want to change the way headings look, add the correct heading from the format drop-down list and then add a “Faux” heading style available from the styles drop-down list. If styles are used alone, without the correct format tags, the page will not have the benefits of semantic markup.

Learn More

Example

<h1>Plato</h1>

<p>The Athenian philosopher Plato (c.428-347 B.C.) is one of the most important figures of the Ancient Greek world and the entire history of Western thought. Plato’s recurring fascination was the distinction between ideal forms and everyday experience, and how it played out both for individuals and for societies.</p>

<h2>Plato’s Dialogues</h2>

<h3>Early Dialogues</h3>

<p>In these dialogues, Socrates is the central character, and is believed to be expressing his own views. These are the only remaining record of Socrates' teachings; hence these are known as the Socratic dialogues.</p>

<h3>Middle Dialogues<h4>

<p>In the middle dialogues Plato’s individual ideas and beliefs, though never advocated outright, emerge from the Socratic form. In the “Meno,” Socrates demonstrates that wisdom is less a matter of learning things than “recollecting” what the soul already knows, in the way that an untaught boy can be led to discover for himself a geometric proof.</p>

<h4>Plato’s Republic</h4>

<p>Plato’s best-known work is generally placed in the middle period of Plato's writings. it has proven to be one of the world’s most influential works of philosophy and political theory, both intellectually and historically. In it, Socrates along with various Athenians and foreigners discuss the meaning of justice and examine whether or not the just man is happier than the unjust man.</p>

<h3>Late Dialogues</h3>

<p>The later dialogues are deeper developments of the philosophy expressed in the earlier ones; these are the most difficult of Plato's works.</p>

<h2>Plato’s Legacy and Influence</h2>

<p>The Academy flourished for nearly three centuries following Plato’s death, but was destroyed in the sacking of Athens by the Roman general Sulla in 86 B.C. In the Renaissance scholars like Petrarch led a revival of Plato’s thought. William Wordsworth, Percy Shelly, and others in the 19th-century Romantic movement found philosophical solace in Plato’s dialogues.</p>

Web Support & Usability

University Information Technology (UIT)