Web Developer Bootcamp Day Two
Tags: webdeveloperbootcamp2020, coltsteele, udemy
Published: 2020-10-13 21:45:56


## Section 4: HTML: Next Steps & Semantics

![section 4 breakdown on trello board](https://dev-to-uploads.s3.amazonaws.com/i/2blvgki2hpj0vcjhtiba.PNG)

(mdn)
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

(mdn)
In HTML, the doctype is the required "<!DOCTYPE html>" preamble found at the top of all documents. Its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!DOCTYPE html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.

![representation of block level vs inline elements](https://dev-to-uploads.s3.amazonaws.com/i/ix1x78fynl8834766e7q.PNG)

### div is block
The HTML Content Division element div is the generic container for flow content. It has no effect on the content or layout until styled using CSS.

As a "pure" container, the div element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

### Span is inline
The HTML span element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. span is very much like a div element, but div is a block-level element whereas a span is an inline element.

### hr tag
The HTML hr element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

### more hr tag stuff!
Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

### br tag
The HTML br element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

### HTML entities
An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard. 

#### Reserved characters
Some special characters are reserved for use in HTML, meaning that your browser will parse them as HTML code. For example, if you use the less-than < sign, the browser interprets any text that follows as a tag. [more on entities/Reserved characters](https://developer.mozilla.org/en-US/docs/Glossary/Entity)

### Semantic Markup
![semantic markup slide](https://dev-to-uploads.s3.amazonaws.com/i/n68cajb3xpvvqa9oz3co.PNG)

#### Semantic elements
[These](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) are some of the roughly 100 semantic elements available:

```
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
```

## Section 3: HTML: The Essentials

![section 3 breakdown on trello board](https://dev-to-uploads.s3.amazonaws.com/i/q2dtx0eduij1qsdu5sd7.PNG)