HTML 101

pogonotomygobbleAI and Robotics

Nov 15, 2013 (3 years and 6 months ago)

60 views

HTML 101

Why semantic
HTML


Give meaning to the content


Separate content from style


SEO


Repurpose


Accessible


Content structure



Heading


<hx>title</hx>

Should be used for titles creating hierarchy


Paragraph


<p>This is (...) a paragraph</p>

Should be used to define paragraphs


Blockquote



<blockquote>This is a quote</blockquote> Use this
for a quotation of a large section.



Citation


<cite>This is a citation</cite>

Citation or reference to anothe source


Span


<span>Hooked text</span>

Adds a hook to a small portion of code


Division


<div><some elements here /></div>

To group elements within sections






Lists


Every element in the list is defined within a <li>


Wrapped by <ul> for unordered list

Wrapped by <ol> for ordered list


Classes and Ids


Use classes when the element will be repeated in
the page (rows, links, small parts, lists)


Use IDs for
UNIQUE

elements in the page

(page structure, navigation, blocks)

DO NOT !



Do not use tables
, use appropriate tags
(unless ...)


Do not add inline styling
(<p
style=“
somethingbad
”></p>) into your tags
(unless ...)


Do not underestimate
the power of CSS
and HTML


Make your
HTML as simple as possible
and let the CSS do the rest.


So,


Better understanding of the markup by,
human beings, browsers, text
-
to
-
speech,
crawlers.


Fexible way to retarget, repurpose the
content


Flexible way to design using CSS