HTML Cheat Sheet
As a Spring Boot developer, your main concern is the backend.
Front End: Graphical interface of a website written in HTML and CSS.
Backend: Server-side logic that stores and manages data.
You are not expected to know HTML. Use this cheat sheet as a guide.
Useful Definitions:
-
block
: takes up the entire width. -
inline
: only takes up the necessary width. -
Container Tag
: contains an opening tag and a closing tag.opening tag
:<p>
Hello
closing tag
:<p>Hello
</p>
- Content exists between the opening and closing tag.
<p>
Hello
</p>
-
Empty Element
: Does not need a closing tag.<img
src="mona-lisa"
>
<link
href="path"
>
<input
type="text"
>
<br>
- You can optionally add a closing slash
<img
src="mona-lisa"
/>
.
Metadata
<head>
: contains metadata.<title>
: title of the document.<style>
: you can define CSS here.<link>
: links an HTML template to an external resource.Empty Element
.th:href
="path-to-resource"
rel = "relationship to document"
<link th:href="@{/path-starts-from-static}" rel="stylesheet">
Visual Elements
<body>
: contains the visual elements.
<body> //visual elements go here. </body>
Container
<div>
is a container that groups HTML content.
<div>
<h1>Hello</h1>
<p>Spring</p>
</div>
<div>
is block-level.
<div>Hello</div> <div>Spring</div>
Span Container
<span>
is also a container that groups HTML content.
<span>
<h1>Hello</h1>
<p>Spring</p>
</span>
<span>
is an inline element.
<span>Hello</span>
<span>Spring</span>
Headers
<h1>
... <h6>
.
Text
<p>
is block-level text.
<p>Spring</p>
<p>Boot</p>
<p>Development</p>
<p>Bootcamp</p>
Images
<img>
: displays an image.Empty Element
.src = "path"
.alt= "alternative text if image fails to show"
.
Layout
Code
<img src="images/A.png" alt="A"/> <img src="images/B.png" alt="B"/> <img src="images/C.png" alt="C"/> <img src="images/D.png" alt="D"/>
Output
Table
<table>
: displays a table.<tr>
: table row (one table can contain many rows).<th>
: header cell (one row can contain many headers).<td>
: data cell (one row can contain many data cells).
<table border="solid" width="300"> <tr> <th>House</th> <th>Name</th> <th>Position</th> </tr> <tr> <td>Gryffindor</td> <td>Harry</td> <td>Seeker</td> </tr> <tr> <td>Slytherin</td> <td>Crabbe</td> <td>Beater</td> </tr> <tr> <td>Hufflepuff</td> <td>Cedric</td> <td>Seeker</td> </tr> </table>
Lists
<ul>
: unordered list.<ol>
: ordered list.<li>
: items in a list.
<ol> <li>Pancakes: $2.99</li> <li>Eggs: $3.29</li> <li>Bacon: $4.99</li> </ol>
Form
-
<form>
: defines an HTML form for user input. -
<input>
: defines an input for the form.Empty Element
.type="text"
: input is a textfield.type="date"
: input is a date.type="submit"
: input is a submit button.type="hidden"
: hides the input.
-
<br>
: produces a Line Break
<form> <input type="text" placeholder="First Name"> <input type="text" placeholder="Last Name"> <p> Date of Birth </p> <input type="date"><br><br> <input type="submit" value="Submit"> </form>
Hyperlink
<a>
: defines a hyperlink.th:href = "@{/url endpoint}"
: GET request to relative path.th:href = "@{/url endpoint(parameter = value)}"
: GET request to relative path while passing in a parameter.role="button"
: anchor tag takes the role of a button.
Common HTML Attributes
HTML attributes are specified in the opening tag.
class
: assigns an HTML element to a class in a stylesheet.width
: controls the width of an element.height
: controls the height of an element.border
: controls the border of an element (usuallynone
, orsolid
)style
: adds styling. For example:"style="color:red"
th:style
: the styling depends on a Thymeleaf expression.
<table border="solid" width="100%">
<tr>
<th>Item</th>
<th>Revenue</th>
<th>Cost</th>
<th>Profit</th>
</tr>
<tr style="background: green">
<td>Table</td>
<td>200</td>
<td>49</td>
<td>151</td>
</tr>
<tr style="background: red">
<td style="color: white">Table</td>
<td style="color: white">49</td>
<td style="color: white">200</td>
<td style="color: white">-151</td>
</tr>
</table>
Thymeleaf Counterparts
The counterpart can equal the result of a thymeleaf expression.
- Variable Expression:
${...}
- Selection Expression:
*{...}
- Link Expression:
@{...}
Normal | Counterpart | Example |
---|---|---|
href | th:href | <link th:href="@{path-to-resource-from-static}" |
href | th:href | <a th:href="@{url-endpoint(param='value')}" |
src | th:src | <img th:src="@{path-to-image}" |
style | th:style | <p th:style="${condition} ? 'str' : 'str'" |
value | th:value | <option th:value="${modelAtt}"> |