Skip to content

Commit a9dbbf5

Browse files
nikhiljohn10nikhiljohn10
committed
Added semantic html tags
1 parent 201b026 commit a9dbbf5

File tree

6 files changed

+94
-87
lines changed

6 files changed

+94
-87
lines changed

‎en/css/README.md

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -123,16 +123,16 @@ Your file should now look like this:
123123
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
124124
</head>
125125
<body>
126-
<div>
126+
<header>
127127
<h1><a href="/">Django Girls Blog</a></h1>
128-
</div>
128+
</header>
129129

130130
{% for post in posts %}
131-
<div>
132-
<p>published: {{ post.published_date }}</p>
131+
<article>
132+
<time>published: {{ post.published_date }}</time>
133133
<h2><a href="">{{ post.title }}</a></h2>
134134
<p>{{ post.text|linebreaksbr }}</p>
135-
</div>
135+
</article>
136136
{% endfor %}
137137
</body>
138138
</html>
@@ -181,26 +181,26 @@ Great!
181181

182182
As mentioned above, CSS has a concept of classes. These allow you to name a part of the HTML code and apply styles only to this part, without affecting other parts. This can be super helpful! Maybe you have two divs that are doing something different (like your header and your post). A class can help you make them look different.
183183

184-
Go ahead and name some parts of the HTML code. Replace the `div` that contains your header with the following:
184+
Go ahead and name some parts of the HTML code. Replace the `header` that contains your header with the following:
185185

186186
{% filename %}blog/templates/blog/post_list.html{% endfilename %}
187187
```html
188-
<div class="page-header">
188+
<header class="page-header">
189189
<div class="container">
190190
<h1><a href="/">Django Girls Blog</a></h1>
191191
</div>
192-
</div>
192+
</header>
193193
```
194194

195-
And now add a class `post` to your `div` containing a blog post.
195+
And now add a class `post` to your `article` containing a blog post.
196196

197197
{% filename %}blog/templates/blog/post_list.html{% endfilename %}
198198
```html
199-
<div class="post">
200-
<p>published: {{ post.published_date }}</p>
199+
<article class="post">
200+
<time>published: {{ post.published_date }}</time>
201201
<h2><a href="">{{ post.title }}</a></h2>
202202
<p>{{ post.text|linebreaksbr }}</p>
203-
</div>
203+
</article>
204204
```
205205

206206
We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web that can help you understand the following code. For now, copy and paste it into your `blog/static/css/blog.css` file:
@@ -232,7 +232,6 @@ h4 {
232232

233233
.date {
234234
color: #828282;
235-
float: right;
236235
}
237236

238237
.save {
@@ -262,9 +261,9 @@ h4 {
262261
color: #000000;
263262
}
264263

265-
.post .actions {
264+
.post > .date,
265+
.post > .actions {
266266
float: right;
267-
margin: auto 10px;
268267
}
269268

270269
.btn-default,
@@ -285,33 +284,33 @@ Then surround the HTML code which displays the posts with declarations of classe
285284
{% filename %}blog/templates/blog/post_list.html{% endfilename %}
286285
```html
287286
{% for post in posts %}
288-
<div class="post">
289-
<p>published: {{ post.published_date }}</p>
287+
<article class="post">
288+
<time>published: {{ post.published_date }}</time>
290289
<h2><a href="">{{ post.title }}</a></h2>
291290
<p>{{ post.text|linebreaksbr }}</p>
292-
</div>
291+
</article>
293292
{% endfor %}
294293
```
295294

296295
in the `blog/templates/blog/post_list.html` with this:
297296

298297
{% filename %}blog/templates/blog/post_list.html{% endfilename %}
299298
```html
300-
<div class="content container">
299+
<main class="container">
301300
<div class="row">
302301
<div class="col">
303302
{% for post in posts %}
304-
<div class="post">
305-
<div class="date">
303+
<article class="post">
304+
<time class="date">
306305
{{ post.published_date }}
307-
</div>
306+
</time>
308307
<h2><a href="">{{ post.title }}</a></h2>
309308
<p>{{ post.text|linebreaksbr }}</p>
310-
</div>
309+
</article>
311310
{% endfor %}
312311
</div>
313312
</div>
314-
</div>
313+
</main>
315314
```
316315

317316
Save those files and refresh your website.

‎en/django_forms/README.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Before we add the link, we need some icons to use as buttons for the link. For t
4848

4949
> Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there.
5050
51-
It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` named `container` inside `page-header` `div` tag, we will add a link:
51+
It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` tag inside `header` section, we will add a link before `h1` tag:
5252

5353
{% filename %}blog/templates/blog/base.html{% endfilename %}
5454
```html
@@ -75,22 +75,22 @@ After editing the line, your HTML file should now look like this:
7575
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
7676
</head>
7777
<body>
78-
<div class="page-header">
78+
<header class="page-header">
7979
<div class="container">
8080
<a href="{% url 'post_new' %}" class="top-menu">
8181
{% include './icons/file-earmark-plus.svg' %}
8282
</a>
8383
<h1><a href="/">Django Girls Blog</a></h1>
8484
</div>
85-
</div>
86-
<div class="content container">
85+
</header>
86+
<main class="content container">
8787
<div class="row">
8888
<div class="col">
8989
{% block content %}
9090
{% endblock %}
9191
</div>
9292
</div>
93-
</div>
93+
</main>
9494
</body>
9595
</html>
9696
```
@@ -285,15 +285,15 @@ Now we know how to add a new post. But what if we want to edit an existing one?
285285

286286
First, let's save the icon which represents the edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`.
287287

288-
Open `blog/templates/blog/post_detail.html` in the code editor and add the line
288+
Open `blog/templates/blog/post_detail.html` in the code editor and add the following code inside `article` tag:
289289

290290
{% filename %}blog/templates/blog/post_detail.html{% endfilename %}
291291
```html
292-
<div class="actions">
292+
<aside class="actions">
293293
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}">
294294
{% include './icons/pencil-fill.svg' %}
295295
</a>
296-
</div>
296+
</aside>
297297
```
298298

299299
so that the template will look like this:
@@ -303,20 +303,20 @@ so that the template will look like this:
303303
{% extends 'blog/base.html' %}
304304

305305
{% block content %}
306-
<div class="post">
307-
<div class="actions">
306+
<article class="post">
307+
<aside class="actions">
308308
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}">
309309
{% include './icons/pencil-fill.svg' %}
310310
</a>
311-
</div>
311+
</aside>
312312
{% if post.published_date %}
313-
<div class="date">
313+
<time class="date">
314314
{{ post.published_date }}
315-
</div>
315+
</time>
316316
{% endif %}
317317
<h2>{{ post.title }}</h2>
318318
<p>{{ post.text|linebreaksbr }}</p>
319-
</div>
319+
</article>
320320
{% endblock %}
321321
```
322322

@@ -380,7 +380,7 @@ If you need more information about Django forms, you should read the documentati
380380

381381
Being able to create new posts by clicking a link is awesome! But right now, anyone who visits your site will be able to make a new blog post, and that's probably not something you want. Let's make it so the button shows up for you but not for anyone else.
382382

383-
Open `blog/templates/blog/base.html` in the code editor, find our `container` `div` inside `page-header` `div` and the anchor tag you put in there earlier. It should look like this:
383+
Open `blog/templates/blog/base.html` in the code editor, find our `div` inside `header` and the anchor tag you put in there earlier. It should look like this:
384384

385385
{% filename %}blog/templates/blog/base.html{% endfilename %}
386386
```html

‎en/django_templates/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,16 @@ It works! But we want the posts to be displayed like the static posts we created
4747

4848
{% filename %}blog/templates/blog/post_list.html{% endfilename %}
4949
```html
50-
<div>
50+
<header>
5151
<h1><a href="/">Django Girls Blog</a></h1>
52-
</div>
52+
</header>
5353

5454
{% for post in posts %}
55-
<div>
56-
<p>published: {{ post.published_date }}</p>
55+
<article>
56+
<time>published: {{ post.published_date }}</time>
5757
<h2><a href="">{{ post.title }}</a></h2>
5858
<p>{{ post.text|linebreaksbr }}</p>
59-
</div>
59+
</article>
6060
{% endfor %}
6161
```
6262

‎en/extend_your_application/README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ We will start with adding a link inside `blog/templates/blog/post_list.html` fil
1919

2020
{% block content %}
2121
{% for post in posts %}
22-
<div class="post">
23-
<div class="date">
22+
<article class="post">
23+
<time class="date">
2424
{{ post.published_date }}
25-
</div>
25+
</time>
2626
<h2><a href="">{{ post.title }}</a></h2>
2727
<p>{{ post.text|linebreaksbr }}</p>
28-
</div>
28+
</article>
2929
{% endfor %}
3030
{% endblock %}
3131
```
@@ -142,15 +142,15 @@ Enter the following code:
142142
{% extends 'blog/base.html' %}
143143

144144
{% block content %}
145-
<div class="post">
145+
<article class="post">
146146
{% if post.published_date %}
147-
<div class="date">
147+
<time class="date">
148148
{{ post.published_date }}
149-
</div>
149+
</time>
150150
{% endif %}
151151
<h2>{{ post.title }}</h2>
152152
<p>{{ post.text|linebreaksbr }}</p>
153-
</div>
153+
</article>
154154
{% endblock %}
155155
```
156156

‎en/html/README.md

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,14 @@ You can now have a little fun and try to customize your template! Here are a few
111111
- `<a href="https://djangogirls.org">link</a>` creates a link
112112
- `<ul><li>first item</li><li>second item</li></ul>` makes a list, just like this one!
113113
- `<div></div>` defines a section of the page
114+
- `<nav></nav>` defines a set of navigation links
115+
- `<article></article>` specifies independent, self-contained content
116+
- `<section></section>` defines a section in a document
117+
- `<header></header>` specifies a header for a document or section
118+
- `<main></main>` specifies the main content of a document
119+
- `<aside></aside>` defines some content aside from the content it is placed in (like a sidebar)
120+
- `<footer></footer>` defines a footer for a document or section
121+
- `<time></time>` defines a specific time (or datetime)
114122

115123
Here's an example of a full template, copy and paste it into `blog/templates/blog/post_list.html`:
116124

@@ -122,29 +130,29 @@ Here's an example of a full template, copy and paste it into `blog/templates/blo
122130
<title>Django Girls blog</title>
123131
</head>
124132
<body>
125-
<div>
133+
<header>
126134
<h1><a href="/">Django Girls Blog</a></h1>
127-
</div>
135+
</header>
128136

129-
<div>
130-
<p>published: 14.06.2014, 12:14</p>
137+
<article>
138+
<time>published: 14.06.2014, 12:14</time>
131139
<h2><a href="">My first post</a></h2>
132140
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
133-
</div>
141+
</article>
134142

135-
<div>
136-
<p>published: 14.06.2014, 12:14</p>
143+
<article>
144+
<time>published: 14.06.2014, 12:14</time>
137145
<h2><a href="">My second post</a></h2>
138146
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
139-
</div>
147+
</article>
140148
</body>
141149
</html>
142150
```
143151

144-
We've created three `div` sections here.
152+
We've created one `header` section and two `article` section here.
145153

146-
- The first `div` element contains the title of our blog – it's a heading and a link
147-
- Another two `div` elements contain our blog posts with a published date, `h2` with a post title that is clickable and two `p`s (paragraph) of text, one for the date and one for our blog post.
154+
- The `header` element contains the title of our blog – it's a heading and a link
155+
- Another two `article` elements contain our blog posts with a published date in `time` element, `h2` with a post title that is clickable and a `p` (paragraph) of text for our blog post.
148156

149157
It gives us this effect:
150158

0 commit comments

Comments
 (0)