Skip to main content
Creating Valid HTML

Creating Valid HTML

By following the procedures on this page, you can create valid HTML -- without having to know HTML. 

There is one very important rule:

NEVER paste in content copied directly from Word, Google Docs, or another web page!

Doing this generates TONS of needless garbage markup with no valid structural HTML, such as header and paragraph tags.

To re-use content from a Word document or another web page, you must first paste it into a plain text editor (like Notepad++ for Windows or BBEdit for Mac OS; both free downloads). Then copy the bare text from the text editor, paste it into Sharepoint, and format the content using the procedures below.

Applying Valid HTML Tags with Sharepoint's Toolbar

Sharepoint's "ribbon" toolbar includes a "Markup Styles" menu that helps you apply valid Header and Paragraph tags to content.

Creating HTML Headers

  1. Enter text for the header content and select the text
    HTML Headers - Step 1 - Select text; Step 2 - click Markup Styles button
  2. Select the appropriate level header.
    NOTE: There should only be one h1 on each pageIn our templates, the site title is an h1 (1st-level header); so the page title should be an h2.
    HTML Headers - Step 3 - Select appropriate heading type

Creating HTML Paragraphs

The process is similar, except you select "Paragraph" from the "Markup Styles" menu.

  1. Select the text for a paragraph.
    Paragraph tags - Step 1 - Select test; Step 2 - Click Markup Styles button
  2. Select "Paragraph."
    Paragraph tags - Step 3 - Select Paragraph option

TIP:  To easily create additional paragraphs after your first, place your cursor at the end of the paragraph, and press your keyboard's "Enter" (or "Return") key.  You've now started a second properly-tagged paragraph!


‚Äč

Why this matters

HTML exists to describe the structure of information on the web -- not to make pretty web pages. 

Valid HTML is semantic -- it has a meaningful relation to the structure of information.

Creating web content that is tagged with the correct HTML markup improves accessibility.  It also improves page rankings in Search Engines, and helps your content work correctly with different devices and browsers -- including Screen Readers used by people with disabilities.

For example, Screen Reader software can help blind users "skim" a page by jumping from header to header, or from one paragraph to the next.

Regrettably, WYSIWYG web editors  and bad authoring habits make it all too easy to create content devoid of proper HTML tags.

For example: if you create page or section headers simply by using the text format tools to make text large and bold, a screen reader will not recognize it as an HTML header. 

Similarly, blocks of text copied & pasted into a content editor may not actually be tagged as paragraphs, but as divs or spans -- which are structurally meaningless.

Such authoring mistakes defeat the helpful functions of Screen Readers, and produce pages that fail to meet accessibility requirements

Get Acrobat PDF Reader You may need the free Acrobat Reader to access information presented in PDF format.