WebsiteData/normalize.htm at master · stepsei/WebsiteData · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>normal document flow</title>
<link href="_css/main2.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Welcome to my gallery</h1>
</header>
<article class="gallery">
<h2>Current gallery: Philadelphia</h2>
<p>Here's a series of photos I took from my recent visit to Philadelphia. I love Philadelphia, it has wonderful neighborhoods, a vibrant downtown, and the type of hidden architectural gems that you only get from older cities. It's a joy to shoot, just be sure not to call it "Philly," turns out the locals really don't like that!</p>
<div class="photos">
<img src="_images/KWilliams1.png" width="250" height="189" alt="Philadelphia">
<img src="_images/Kwilliams2.png" width="250" height="189" alt="Philadelphia">
<img src="_images/Kwilliams3.png" width="250" height="189" alt="Philadelphia">
<img src="_images/KWilliams4.png" width="250" height="189" alt="Philadelphia">
<img src="_images/KWilliams5.jpg" width="250" height="189" alt="Philadelphia">
<img src="_images/KWportrait3.jpg" width="250" height="189" alt="Philadelphia"></div>
</article>
<article class="normal">
<h2>Exploring HTML normal document flow</h2>
<p>Prior to HTML5, HTML elements could be categorized as "block-level" or "inline-level." For the most part that's still true, although HTML5 created multiple element content categorizations such as Phrasing, Flow, and Sectioning that replace the more global block-level and inline-level categorization. Regardless, browsers still display content primarily using those two definitions. Most Phrasing content is displayed as inline-level elements while Heading and Sectioning content is displayed as block-level.</p>
<p>What does this mean? Well, block-level elements are typically formatted with a line break before and after the content; resulting in the content occupying it's own line on the page. Some block-level elements, like divs and the new HTML5 sectioning elements, can contain other block-level elements, while others like paragraphs and headings cannot.</p>
<p>Inline-level elements typically occur within another block-level element (although they don't have to) and generally contain either data or other inline-level elements. This content typically displays horizontally along the entire width of the viewport, only breaking down to a new line when the viewport width forces it to. Images, bold, italic, strong, emphasis, inputs, and links are all examples of inline-level elements.</p>
<h3>How normal document flow works</h3>
<p>Browsers display content in the order that it is found. Content at the top of the document, for example, is displayed first and is followed by the content after it. Block-level elements are displayed on their own line, while inline-level elements are displayed as part of the normal flow of document content. The results in the "stacking" of block-level blocks and the flow of inline-level elements within these blocks.</p>
</article>
</body>
</html>