HTML and CSS Reference
In-Depth Information
apple cider and breakfast crepes</p>.</strong>
2.
<p id="intro">The caramel apple cider is delicious.
GOOD CODE
1.
<p class="intro">New items on the menu today include
<strong>caramel apple cider and breakfast crepes</strong>.</p>
2.
<p class="intro">The caramel apple cider is delicious.</p>
Make Use of Semantic Elements
The library of elements in HTML is fairly large, with well over 100 elements available for
use. Deciding which elements to use to describe different content may be difficult, but these
elements are the backbone of semantics. We need to research and double-check our code to
ensure we are using the proper semantic elements. Users will thank us in the long run for
building a more accessible website, and your HTML will arguably be easier to style. If you
are ever unsure of your code, find a friend to help out and perform routine code reviews.
Here the HTML doesn't use the proper heading and paragraph elements; instead, it uses
meaningless elements to style and group content.
BAD CODE
1.
<span class="heading"><strong>Welcome Back</span></strong>
2.
<br><br>
3.
It has been a while. What have you been up to lately?
4.
<br><br>
GOOD CODE
1.
<h1>Welcome Back</h1>
2.
<p>It has been a while. What have you been up to lately?</p>
Use the Proper Document Structure
As previously mentioned, HTML is a forgiving language and, therefore, pages will render
without the use of the
<!DOCTYPE html>
doctype or
<html>
,
<head>
, and
<body>
elements. Without a doctype and these structural elements, pages will not render properly
in every browser.
We must always be sure to the use proper document structure, including the
<!DOCTYPE
html>
doctype, and the
<html>
,
<head>
, and
<body>
elements. Doing so keeps our
Search WWH ::
Custom Search