HTML Structure
| Tag | Name | Description |
|---|---|---|
<!DOCTYPE html>
|
HTML !DOCTYPE Declaration | All HTML documents must start with this tag and is information for the browser. |
<html>
|
HTML Tag |
Represents the root of an HTML document and contains all
other HTML elements. Should include the
lang="en" attribute.
|
<head>
|
Head Tag |
Container for metadata that is placed between the
<html> and
<body> tag.
|
<meta>
|
Meta Tag |
Defines meta data about an HTML document. The
charset attribute
specifies the character encoding of the HTML document. HTML5
encourages use of the UTF-8 character set.
|
<title>
|
Title Tag | Defines the title of the document and is displayed in the browser's toolbar. |
<link>
|
Link Tag | Specifies relationships between the current document and an external resource. This could be a stylesheet, external fonts, etc. |
<body>
|
Body Tag | Defines the document's body and contains all the contents of an HTML document. |
HTML Boilerplate Sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
Semantic HTML
| Tag | Name | Description |
|---|---|---|
<header>
|
Header Tag |
Represents a container for introductory content or a set of
navigational links. You can have several
<header> elements
in one HTML document, however it should not be placed in a
<footer>,
<address> or
another
<header> element.
|
<nav>
|
Nav Tag | Defines a set of navigation links. |
<article>
|
Article Tag | Specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the site and still make sense. |
<section>
|
Section Tag | Defines a section in a document. |
<aside>
|
Aside Tag | Defines some content aside form the content it is placed in. The aside content should be indirectly related to the surrounding content. |
<footer>
|
Footer Tag | Defines a footer for a document or section.Typically contains authorship information, copyright information, contact information, sitemap, back to top links, and/or related documents. |
<figure>
|
Figure Tag | Specifies self-contained content, like illustrations, diagrams, photos, code class="table-html-tag" listings, etc. |
<figcaption>
|
Figcaption Tag |
Defines a caption for a
<figure> element.
|
Semantic Layout Example
CSS Selectors
CSS Selectors refer to the HTML elements to which our CSS rules
apply.
There are a variety of different types of selectors detailed in the
table below: