HTML Semantic Structure
Download
Report
Transcript HTML Semantic Structure
HTML Semantic
Structure
Kevin Erickson
Definition
HTML semantic structures, in easy to understand terms, gives meaning to
the information on the webpage. Semantic structure is not meant to define
its appearance, it is meant to define its content.
Purpose
• The proper HTML semantic structure of a webpage is very
important.
• HTML markup language is never to be used in the design of
your site.
• For example, <p></p> should never be used to create breaks
in the page. Those tags are meant for content.
• For proper breaks in a page, <br> should be used.
Purpose
• Another very important structure element to remember is the
emphasis desired for a word or phrase.
• If you want to have a word in boldtype you should use
<strong> instead of <b>.
• Why, because you are “defining” the content.
• The same goes for italicizing. <em> for emphasis, not <i>.
Why does this matter?
• The usefulness of proper HTML semantic structure is key to
having an accessible website.
• What does “accessible” mean?
• It means that your page can be accessed by humans and/or
machines.
• Screen readers will be able to understand your page. For
example, a text-to-speech application will correctly read aloud
the emphasis of a <strong> tag. It would not be able to do the
same with a <b>, bold, tag.
Why does this matter?
• It will streamline a web search engine’s ability to know what is
in the content of your web page.
• If you use HTML to assist with the design of your page, the
extra code will only slow the engine’s ability to read the
content of your page, or the “meaning” of your page.
Other uses:
• It is important to use proper semantics with any images you
use in your webpage as well.
• Alternate text, “alt=“ will help visually impaired users
understand what the image is as it is read by a screen reader.
• It will also be beneficial to a search engine as it searches all of
the content in your code.
• The descriptive words you use with your images will help
“define” the content of your page and increase your hierarchy
in a search engines findings.
• Proper use of <header>, <nav>, <body> , and <footer> is key
to the content of your website.
Summary
• The proper use of HTML semantic structure will benefit both
humans and machines.
• The visibility of your website will increase as you follow these
rules.
• Web developers outside of your circle will be able to easily
understand your HTML markup.
• Developers will understand what you are doing and why you
are doing it.
• Your website will stand the test of time as you follow the
widely accepted semantic structure of HTML markup.