Link
Chouffy's Notes

This site uses Just the Docs, a documentation theme for Jekyll.

Search

HTML

Syntax

In those notes Meaning in HTML
tag alone <tag>content</tag>
tag> <tag>
tag/ <tag/>

Comments : <!-- comment -->

Head tags 

title
meta charset="UTF-8">
meta name="description" content="This is an awesome website">
meta name="author" content="Mike">
meta name="keywords" content="key1, key2">
meta name="viewport" content="width=device-width, initial-scale=1.0">

Body tags

Structure tags

  • header
    • nav - navbar with links, …
  • main
    • article - article of a blog for example
      • section (multiple possible) - part of the article, contain hx, p, …
        • aside - not directly connected to the content, like ads
  • footer

Text

Text content

Tag Role comment
br/ break new line
chr/ horizontal rule horizontal line
hx header with x from 1 to 6
p paragraph to be used for each paragraph
a link see below

Text formatting

Tag Role
b bold
i italic
big bigger font size
small smaller font size
sup superscript

Text attributes

Applicable to body, p, hx <~ style=~>content</p>

For example, change CSS color:

style="
    color: blue;
    background-color: blue;"

<a href=~>HTML content</a>

Tag Role
href="https://www" link to external website
href="page2.html" link to page in same directory
href="cat.jpg" link to a file in same directory
href="dir1/page3.html" link to page in sub-directory
… target="_blank" … in new tab

Images

<img ~ '/>

Tag Role
src="full_link.jpg" hard link to image
… alt="Alt Text" alternative to image
… width="100" height="100" size of the image - 100 px
if only one size is chosen, HTML adapt with correct aspect ratio

Video

<video ~>Content if video not displayed</video>

Tag Role
src="link.mp4" link to video
.. controls video controls
… width="300" 300 px of width - auto correct aspect ratio
… poster="thumb.jpg" thumbnail for the video
… autoplay  
… loop  

Lists

Tag Role
ul/ol/dl list start
li list item
… href~ attribute

ul - unordered list

<ul><li>bla</li><li>bla</li></ul>

ol - ordered list

<ol><li>bla1</li><li>bla2</li></ol> ol types="i": style of the list

dl - description list

dt: item dd: item description

Tables

  • table
    • tr - table row
      • th - table header>content<
      • td - table data> content<
    • caption - title of the table>content<

Structuration

  • Table
    • thead - table head
      • caption
      • tr
        • th
        • th
    • tbody - table body
      • tr
        • td
        • td
      • tr
        • td

Table attributes

td colspan="3": this data will use 3 columns

Containers

Set of tags containing HTML elements

  • block - takes all the width of a page -> divs
  • inline - takes only needed space -> spans

Div - block containers

div: and then content

Span - inline containers

span: and then content

Inputs

form: form element - wrapper for input

One line input

Tag Role
input type="text" create a text box
input type="password" create a password box
.. type="date","email","range","file" examples of types
… value="Default Value" define default value

Multiple input

Tag Role
textarea>Text Message Text area with message
… rows="10" cols="30" define size

Selectors

Tag Role
input type="checkbox" 1 checkbox
input name="btn1" type="radio"
input name="btn1" type="radio"		 2 radios buttons

iFrames

Tag Role
iframe src="http://www.">Text< iframe to src, Text is displayed if frame not available
… width="100" height="100" website
… frameborder="0" no borders

Reference

  • [HTML - Build a Website Tutorial](https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpMSXUYwxDFOvyxlssug29Fu) by Mike Dane