HTML Basics - The document body
Between the closing head tag and the closing html tag we only have the body tag and only one of them. Inside of this tag we place all the tags to make up the content on the page.
Block elements vs inline elements
Block elements do not allow other elements next to them, inline elements do.
This behaviar can be changed using CSS display property.
The <p> tag
This tag creates a paragraph of text. Type: Block element.
<p>This is a paragraph</p>
<p>This is another paragrapp</p>The <span> tag
This tag can be used to create a section inside a paragraph, that you can target with CSS.
Type: Inline element.
<p>This is a paragraph <span>This test will be styled with css</span></p>The <br> tag
This tag creates a line break. Can be used to create a line break in a paragraph.
Type: Inline element.
<p>This is a paragraph <br> more text in a new line</p>This is a paragraph
more text in a new line
The <h1> - <h6> tags
From big to small and most important to least important, we have h1, h2,h3,h4,h5,h6.
You should always only have one h1 element on a page. headings are important to SEO.
Type: Block element.
<h1>Biggest</h1>
<h2>Smaller than h1</h2>
<h3>Smaller that h2</h3>
<h4>Smaller that h3</h4>
<h5>Smaller that h4</h5>
<h6>Smallest</h6>The <strong> tag
This tag marks text as strong, to show it's important. Type: Inline element.
<p>This is a paragraph <strong>of text</strong></p>This is a paragraph of text
The <em> tag
This tag is used to mark the text as emphasized. It's not a visual hint but a semantic hint.
Type: Inline element.
<p>This is a paragraph of <em>text</em></p>This is a paragraph of text
The <blockquote> tag
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
Type: Block element.
<blockquote>This is a blockquote</blockquote>This is a blockquote
The <hr> tag
This tag creates a horizontal line, this can be used to create separation between content.
Type: Block element.
<p>We are separated by a hr tag</p>
<hr>
<p>We are separated by a hr tag</p>We are separated by a hr tag
We are separated by a hr tag
The <code> tag
This tag is very useful to show code blocks.
Type: Block element.
<pre>
<code>
console.log("This tag can be used to display code like this");
console.log("And like this");
</code>
</pre>You have to wrap the code block with a <pre> tag otherwise whitespace will be igored and all the text will be displayed in one line.
By default the browser will apply styling to the pre tag similar to this.
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}Lists
There 3 types of lists, 1. unordered list 2. ordered list 3. definition list ( rarely used )
The <ul> tag
This tag creates a undordered list and each item in the list are presented with a <li> tag.
Type: Block element.
<ul>
<li>item1</li>
<li>item2</li>
</ul>- item1
- item2
The <ol> tag
This tag creates a ordered list and each item in the list are presented with a <li> tag.
Type: Block element.
<ol>
<li>item1</li>
<li>item2</li>
</ol>- item1
- item2
Other text tags for presentational purposes.
The <mark> tag
<mark>mark</mark>mark
The <ins> tag
<ins>ins</ins>ins
The <del> tag
<del>del</del>del
The <sup> tag
<p>2 x 4<sup>8</sup></p>2 x 48
The <sub> tag
<p>$16<sub>p/p</sub></p>$16p/p
The <small> tag
<p>This is normal text<small>This is small text</small></p>This is normal text and this is small text
The <i> tag
<i>This is text in a i tag</i>This is text in a i tag
The <b> tag
<b>This is text in a b tag</b>This is text in a b tag
Links
Links are created using the <a> tag and it's destination can be set with the href attribute.
The link name can be added between the opening and closing tag.
<a href="https://jeansnyman.com">Home</a>
// it can also be a relative url
<a href="/blog/">Blog</a>
//To open a link in a new tab
<a href="/blog/" target="_blank">Blog</a>
//The link text can also be replaced with anything else like an image.
<a href="https://jeansnyman.com">
<img src="some_image.jpg" alt="image">
</a>